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基本 内 容 


在 网 络 技术 日 新 月 异 的 今天 ， 几 乎 每 时 每 刻 都 有 新 的 网 站 诞生 ， 作 为 商业 或 是 自我 展 
示 的 互联 网 平台 ， 网 站 的 制作 显得 尤为 重要 。 当 用 户 浏览 网 站 时 ， 总 会 被 一 些 界 面 漂亮 且 
内 容 丰 富 的 网 站 所 吸引 。 

在 制作 网 站 时 ， 很 多 人 总 会 觉得 需要 高 级 的 工具 ， 于 是 就 查找 相关 软件 、 下 载 、 安 装 
软件 、 安 装 插 件 等 繁琐 的 步 又。 的确 有 许多 软件 制作 出 网 站 的 效果 确实 不 错 ， 但 有 的 就 差 
强人 意 。 有 没有 简单 、 高 效 的 工具 和 方法 ， 使 得 制作 网 站 既 容 易 上 手 ， 而 且 立 竿 见 影 ? 

实际 上 ， 你 可 以 不 具备 任何 编程 知识 ， 因 为 电脑 里 已 具备 所 需 的 全 部 软件 了 ， 这 就 是 
HTML。HTML (Hyper Text Markup Language， 超 文本 标识 语言 ) 是 Web 页面 的 描述 性 语 
言 ， 是 构成 网 页 的 基本 元 素 ， 是 所 有 网 页 制作 技术 的 核心 和 基础 ， 也 是 每 个 网 页 制作 者 必 
须 掌握 的 基本 知识 。 有 很 多 初学 者 在 开始 学 习 制 作 网 页 时 ， 大 多 使 用 了 现 有 的 可 视 化 网 页 
编辑 制作 软件 ， 不 重视 对 HTML 语言 的 理解 ， 忽 视 了 HTML 标签 的 语法 和 技巧 ， 以 至 于 
在 后 来 的 实践 中 走 了 很 多 弯路 。 

本 书 基于 网 页 制作 的 实战 角度 ， 分 为 基础 篇 、 进 阶 篇 和 高 级 篇 3 部 分 。 从 网 页 必 备 元 
素 开始 ， 详 细 完 整地 介绍 HTML 基础 知识 及 相关 标签 和 属性 。 为 了 使 网 页 更 加 美观 ， 同 时 
使 代码 具有 简洁 性 ， 还 详细 讲解 利用 CSS 样式 表 美 化 网 页 的 各 项 功能 。 其 中 ， 使 用 大 量 芯 
实例 来 说 明 HTML 中 各 标签 和 属性 以 及 CSS 样式 表 的 使 用 方法 和 技巧 ， 以 帮助 用 户 加 深 
理解 。 本 书 不 仅 教 会 用 户 如 何 建立 一 个 网 页 ， 创 建 一 个 网 站 ， 而 且 对 于 想 精 通 网 页 制作 的 
用 户 ， 本 书 在 高 级 篇 结合 网 页 的 应 用 ， 增 加 了 动态 网 页 JavaScript 的 相关 知识 以 及 配合 使 
用 CSS 样式 表 一 些 特殊 实例 。 

全 书 共 分 为 17 章 ， 各 章 具 体内 容 如 下 。 

口 第 1 章 : 概括 地 介绍 网 页 的 基本 概念 ， 包括 网 页 的 基本 构成 元 素 、HTML 的 特点 

及 发 展 史 等 。 
口 第 2 章 : 主要 讲解 如 何 创 建 HTML 文件 。 包 括 HTML 的 基本 结构 、 建 立 简单 的 
网 页 等 。 

口 第 3 章 : 主要 讲解 HTML 的 基本 标签 ， 包 括 标题 标签 、 内 容 标签 、 媒 套 标签 等 。 

D 第 4 章 : 主要 讲解 HTML 的 文本 编辑 功能 ， 包 括 设 置 字体 、 字 体 大 小 、 颜 色 等 

属性 以 及 如 何 添加 空格 和 特殊 字符 等 。 

D 第 5 章 : 主要 讲解 HTML 的 段落 编辑 功能 ， 包 括 段落 的 对 齐 属性 、 换 行 标签 的 

使 用 等 。 
口 第 6 章 : 主要 讲解 如 何 添加 HIML 图 像 ， 包括 设置 图 像 大 小 、 边 框 、 对 齐 方 式 
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口 第 7 章 : 重点 介绍 添加 超 链接 的 方法 ， 包 括 影 像 地 图 的 设置 等 。 

口 第 8 章 : 介绍 了 在 网 页 中 添加 多 媒体 元 素 ， 包 括 添 加 滚动 字幕 、 背 景 音乐 等 。 

口 第 9 章 : 详细 讲解 如 何 添加 HTML 表格 ， 包 括 设置 表格 、 表 格 边框 和 单元 格 的 
各 种 属性 等 。 

口 第 10 章 : 讲解 处 理 文字 和 数据 的 另外 一 种 方式 一 一 列表 ， 包 括 三 种 列表 的 编排 
功能 。 

口 第 11 章 : 讲解 动态 网 站 中 经 常用 到 的 一 个 元 素 一 一 表单 ， 包 括 几 种 常见 的 表单 
形式 。 

口 第 12 章 : 主要 讲解 如 何 通过 框架 结构 规划 网 页 ， 包 括 框架 集 的 基本 属性 和 子 窗 
口 的 设置 、 浮 动 框架 的 添加 等 。 

口 第 13 章 : 介绍 <meta> 标 签 ， 包 括 基 本 属性 和 常用 到 的 基本 功能 等 。 

口 第 14 章 : 详细 介绍 如 何 使 用 CSS 样式 表 来 格式 化 网 页 ， 包括 文本 、 背 景 、 边 框 、 
超 链接 等 属性 的 设置 ， 以 及 一 个 综合 实例 等 。 

口 第 15 章 : 重点 介绍 使 用 CSS 滤 镜 ， 包 括 常见 的 效果 及 综合 实例 等 。 

口 第 16 章 : 动态 网 页 DHTML 简介 , 包括 JavaScript 简介 和 CSS+Javascript 的 综合 
实例 等 。 

口 第 17 章 : 详细 讲解 如 何 发 布 HTML 网 页 的 步骤 。 

主要 特点 


本 书 作 者 都 是 长 期 使 用 HTML 和 相关 网 页 编辑 软件 进行 网 站 制作 的 教授 讲师 和 工程 
师 ， 有 着 丰富 的 教学 和 制作 开发 网 站 的 经 验 。 在 内 容 编 排 上 ， 按 照 用 户 学 习 的 一 般 规律 ， 
结合 大 量 实例 讲解 操作 步骤 ， 能 够 使 用 户 快速 、 真 正 地 掌握 HTML 及 CSS 的 使 用 。 
本 书 具 有 以 下 鲜明 的 特点 : 


口 ”从 零 开 始 ， 轻 松 入 门 ; 

口 ”图 解 案例 ， 清 晰 直观 ; 

口 图文并茂， 操作 简单 ; 

口 ”实例 引导 ， 专 业经 典 ; 

口 “ 学 以 臻 用， 注重 实践 。 

读者 对 象 

口 “ 学 习 网 页 制作 的 初级 用 户 ; 

口 “ 具 有 一 定 HIML 基础 知识 ， 希 望 进一步 深入 掌握 HIML 功能 、CSS 样式 表 以 及 
动态 网 页 制作 的 中 级 用 户 ; 

口 ”大 中 专 院 校 计算 机 相关 专业 的 学 生 ; 

口 ”从 事 网 站 开发 的 技术 人 员 。 


本 书 既 可 以 作为 院 校 计算 机 专业 的 教材 ， 也 可 以 作为 自学 教程 ， 同 时 也 非常 适合 作为 
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专业 人 员 的 参考 手册 。 
配套 程序 简介 


为 了 方便 用 户 学 习 ， 本 书 提供 了 全 部 实例 源 文件 ， 下 载 地 址 为 http://www.tup.com.cn。 
这 些 文件 都 保存 在 与 本 书 章节 相对 应 的 文件 夹 中 。 

本 书 主要 由 张 剑 、 邢 程 、 王 正成 编写 ， 参 加 本 书 编著 工作 的 还 有 尹 晓 东 、 郭 雪松 、 李 
玉 梅 、 张 锐 、 管 殿 柱 、 宋 一 兵 、 付 本 国 、 赵 秋 玲 、 赵 景 波 、 张 洪 信 、 王 献 红 、 谈 世 哲 等 。 

感谢 您 选择 了 本 书 ， 希 望 我 们 的 努力 对 您 的 工作 和 学 习 有 所 帮助 ， 也 希望 您 把 对 本 书 
的 意见 和 建议 告诉 我 们 。 


零点 工作 室 网 站 地 址 : www.zerobook.net 
零点 工作 室 联 系 信箱 : gdz_zero@126.com 
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在 制作 网 站 时 , 使 用 HTML 是 不 可 避免 的 。 即 使 用 户 用 交互 性 较 好 的 Dreamweaver 等 
工具 来 制作 网 站 ， 了 解 基本 的 HTML 知识 也 会 令 你 在 网 站 制作 过 程 中 倍 感 轻松 ， 并 制作 出 
效果 更 好 的 网 站 。 

实际 上 ，HTML 并 不 是 一 种 程序 ， 而 是 一 种 控制 网 页 中 信息 内 容 显 示 的 标记 语言 。 基 
本 上 每 一 个 网 页 都 是 由 HTML 语言 组 成 的 ， 所 以 要 学 习 网 站 怎样 建设 , 需要 先 从 网 页 的 基 
本 语言 一 -HTML 学 起 。HTML 不 同 于 其 他 的 编程 语言 ， 用 户 并 不 需要 具备 任何 的 编程 基 
础 ， 也 不 需要 安装 所 谓 的 “高 级 软件 ”， 用 比较 简单 的 方法 就 可 以 建立 网 页 及 制作 出 各 式 
各 样 的 网 页 效果 。 

本 章 要 点 : 

口 网 页 的 基本 构成 元 素 

口 HTML 标签 的 概念 

口 HTML 的 特点 


1.1 网 页 设计 的 基本 概念 


伴随 着 互联 网 的 普及 ， 网 络 早已 深入 到 生活 的 方方面面 。 在 访问 各 个 网 站 时 ， 包 括 人 
们 所 熟知 的 大 型 门户 网 站 的 首页 ， 在 移动 设备 和 各 种 应 用 软件 中 都 能 看 到 各 式 各 样 的 网 页 
设计 界面 。 在 众多 的 网 页 中 ， 界 面 美 观 、 内 容 丰 富 的 网 页 尤 能 吸引 人 的 眼球 。 


1.1.1 网 页 的 概念 


相对 于 HTML 这 个 稍 具 专业 色彩 的 术语 而 言 ，“ 网 页 ” 则 是 我 们 更 为 熟悉 的 名 词 。 网 
页 是 网 站 的 重要 组 成 部 分 。 网 页 包括 有 文字 、 视 频 、 声 音 、 图 人像、 动画、 表格 等 元 素 。 多 
个 网 页 经 过 组 合 链接 形成 了 一 个 资源 的 综合 体 ， 也 就 是 所 说 的 网 站 。 如 图 1-1 所 示 ， 是 搜 
狐 网 站 的 一 个 网 页 。 
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搜狐 网 站 的 网 页 


1.1.2 ”网 页 基本 构成 元 素 


每 个 网 页 构成 的 主要 元 素 不 尽 相 同 ， 但 基本 上 都 包含 以 下 常见 元 素 。 


a 
文字 
可 以 这 么 说 , 几乎 没有 一 个 网 页 不 包含 文字 , 文字 能 很 直观 地 反映 本 网 页 的 主题 内 容 ， 
如 图 1-2 所 示 。 
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2. 视频 


视频 具有 时 效 性 、 
所 示 。 
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图 1-3 视频 网 页 


3. 声音 


这 种 元 素 多 出 现 于 音乐 类 网 站 ， 尤 其 在 彩铃 网 站 中 比较 常用 ， 如 图 1-4 所 示 。 
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动 性 。 特 别 是 新 闻 视 频 ， 能 够 形象 地 表达 所 述 内 容 ， 如 图 1-3 
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4. 图 像 
在 网 页 中 适当 地 添加 图 片 素材 ， 可 以 一 日 了 然 地 展现 主题 ， 如 图 1-5 所 示 。 
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图 1-5 图 片 网 页 
5. 动画 
动画 在 网 页 中 有 着 重要 作用 。 在 浏览 网 页 时 ， 由 于 动画 文件 比较 小 ， 网 络 传输 速度 
更 快 ， 所 以 , 可 以 直接 在 网 页 中 运行 ， 多 见于 网 站 的 logo 及 游戏 、 动漫 等 网 站 ， 如 图 1-6 


所 示 。 
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1.1.3 ”常用 的 网 页 设计 软件 
设计 网 页 的 软件 非常 多 ， 常 用 的 有 文本 编辑 器 、FrontPage、Dreamweaver 等 。 
1. 文本 编辑 器 


如 果 用 户 正 在 使 用 Windows 操作 系统 的 话 ， 可 以 使 用 系统 自 带 的 记事 本 (Notepad) 
程序 。 依 次 点 击 “ 开 始 菜单 一 程序 一 附件 ”找到 该 程序 。 记 事 本 是 一 个 非常 简单 的 文本 编 
辑 程序 ， 主 界面 如 图 1-7 所 示 。 


《</html> 


ll, cdl 


图 1-7 记事 本 


2. FrontPage 


FrontPage 是 微软 公司 推出 的 一 款 网 页 制作 入 门 级 软件 ， 如 图 1-8 所 示 。FrontPage 的 
使 用 方便 简单 ， 会 用 Word 就 能 做 网 页 ， 所 见 即 所 得 是 其 特点 ， 主 界面 如 图 1-9 所 示 。 
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图 1-8 FrontPage 2003 图 1-9 ”FrontPage 2003 软件 主 界面 
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3. Dreamweaver 


Dreamweaver 软件 是 Macromedia 最 新 开发 的 HTML 编辑 器 ， 如 图 1-10 所 示 。 用 于 对 
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Web 应 用 程序 进行 设计 、 编 码 和 开发 。 它 具有 可 视 化 编辑 界面 ， 友 


好 的 操作 界面 倍 受 广大 网 页 设计 者 的 欢迎 。 另 外 ，Dreamweaver 的 网 页 动态 效果 与 网 页 排 
版 功能 都 比 一 般 的 软件 要 好 ， 能 够 帮助 用 户 轻松 地 设计 出 复杂 的 交互 式 网 页 ， 产 生动 态 效 
果 ， 主 界面 如 图 1-11 所 示 。 
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图 1-11 Dreamweaver 8 软件 主 界面 
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1.2 HTML 基本 概念 


HTML 是 网 络 的 通用 语言 , 它 允 许 网 页 编辑 者 建立 多 种 元 素 相 结 合 的 复杂 网 页 页 面 并 
发 布 至 因特网 。 无 论 用 户 使 用 的 是 什么 类 型 的 电脑 或 浏览 器 , 都 可 以 在 网 上 浏览 这 些 页 面 。 


1.2.1 HTML 简介 


HTML 是 由 蒂 姆 。 伯 纳 斯 。 李 发 明 的 。HTML 是 “Hyper Text Markup Language ( 超 
文本 标记 语言 ) ”的 缩写 。 超 〈Hyper) 是 相对 于 线性 〈linear) 来 说 的 ; 文本 〈Text) 意 
味 着 它 是 自 解释 的 意思 〈selfexplanatory) ; 标记 〈Markup) 指 的 是 如 何 处 理 文 本 。 对 文 
本 作 标 记 的 方式 ， 与 在 文本 编辑 程序 里 将 文本 加 粗 ， 或 者 将 一 行文 本 设 为 标题 类 似 ; 语言 
(Language) ，HTML 本 身 就 是 一 种 语言 ， 它 包括 许多 英文 单词 。 

使 用 HTML 可 以 进行 以 下 操作 : 

(1) 发 布 包 含 文本 、 视 频 、 声 音 、 图 片 及 表格 等 元 素 的 在 线 文 档 。 
(2) 通过 设置 超 链接 进行 网 页 间 的 跳 转 。 
(3) 设计 表单 并 将 用 户 输 入 的 内 容 提 交 给 服务 器 进行 处 理 。 
(4) 嵌入 滚动 字幕 、Active 控件 等 多 媒体 内 容 。 
1.2.2 HTML 标签 

在 HTML 中 ， 主 要 通过 各 种 标签 来 标示 和 排列 内 容 及 对 象 。 标 签 (tag) 标示 元 素 的 
起 始 与 结束 。 所 有 标签 都 具有 相同 的 格式 : 以 小 于 号 “<” 开头 ， 以 大 于 号 “>” 结 尾 ， 如 
<head> 和 </head> 就 是 一 对 标签 。 

HTML 中 的 标签 形式 有 两 种 : 单 标签 和 双 标签 。 

1. 单 标 签 

单 标签 只 需要 单独 使 用 即 可 表达 相应 的 功能 ， 如 <br> 表 示 换 行 。 其 语法 如 下 : 


<br> 


2. 双 标 签 

双 标 签 包含 有 两 种 标签 : 首 标签 (starttag) (如 <html> ) 和 尾 标签 (endtag) (如 </html> ) 。 
区 别 在 于 ， 尾 标签 多 一 条 斜 杜 “/”。 通 过 将 内 容 放 在 首 标签 和 尾 标签 之 间 来 进行 标记 。 如 
<b> 标 签 的 作用 是 告诉 浏览 器 ， 在 标签 <b> 和 </b> 之 间 的 文本 应 以 粗 体 显示 。 (这 里 的 “b” 
是 “ 粗 体 (bold) ”的 意思 。) 语法 如 下 : 


<b> 这 句 话 应 显示 为 粗 体 </b> 
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外 大 多 数 浏览 器 不 介意 标签 是 大 写 还 是 小 写 ， 或 者 混合 大 小 写 。 所 以 <HTML>、 
<html> 或 <HIMI> 在 浏览 器 上 的 显示 效果 相同 。 但 是 , 正确 写法 是 采用 小 写字 母 来 
书写 标签 。 所 以 ， 要 养 成 用 小 写字 母 写 标签 的 习惯 。 


1.3 HTML 的 特点 及 发 展 史 


1.3.1 HTML 的 特点 


HTML 有 着 其 他 语言 不 可 比拟 的 优势 : 

(1) 易于 上 手 。 浏 览 器 和 记事 本 程序 〈 或 类 似 的 简易 文本 编辑 器 ) 就 是 用 户 所 需 的 
全 部 工具 ， 有 了 它们 ， 就 可 以 制作 自己 的 网 页 了 。 如 果 使 用 Windows 操作 系统 ， 可 以 使 用 
它 自 带 的 记事 本 (Notepad) 程序 。 如 果 使 用 的 是 其 他 操作 系统 ， 也 有 类 似 的 简易 文本 编辑 
器 可 以 使 用 ， 如 Linux 上 的 Pico 或 Mac (苹果 机 ) 上 的 Simple。 

(2) 易于 控制 。 记 事 本 是 一 个 非常 简单 的 文本 编辑 程序 ， 用 它 编 写 程序 非常 好 ， 因 
为 它 不 会 干涉 用 户 所 输入 的 任何 内 容 ， 给 予 用 户 完全 的 控制 权 。 而 许多 网 页 制作 工具 的 问 
题 在 于 它们 提供 了 许多 标准 功能 供用 户 选择 。 这 样 的 缺点 是 用 户 只 能 按照 这 些 标准 功能 来 
制作 网 页 。 所 以 ， 这 类 工具 常常 不 能 创建 需要 的 网 页 。 而 使 用 记事 本 (Notepad) 或 其 他 简 
易 文 本 编辑 器 ， 全 部 代码 均 由 用 户 自己 编写 。 


1.3.2 ”HTML 的 发 展 史 


1989 年 ， 蒂 姆 。 伯 纳 斯 。 李 (Tim BernersLee) 发 明了 万 维 网 (World Wide Web) ， 
并 为 其 编写 了 第 一 套 万 维 网 服务 器 与 客户 端 程序 。 

1990 年 12 月 ， 他 完成 了 第 一 版 的 HTML 语言 规范 ， 规 定 了 超 链 接 的 使 用 ， 并 定义 了 
URI、HTTP 等 概念 。HTML 语言 因 其 简单 、 高 效 等 特性 ， 一 经 推出 就 迅速 成 为 发 布 Web 
内 容 的 主要 格式 。 

1994 年 , 为 了 更 好 地 规范 HTML 语言 ， 蒂 姆 " 伯 纳 斯 。 李 成 立 了 W3C 委员 会 (World 
Wide Web Consortium) ， 该 委员 会 在 MIT〔 麻 省 理工 大 学 ) 、ERCIM (欧洲 数学 与 信息 
学 研究 机 构 ) 、 日 本 庆 应 义 熟 大 学 的 领导 下 致力 于 发 展 、 完 善 各 种 网 络 技术 规范 ， 为 软件 
开发 人 员 所 熟知 的 HIML、CSS、XML 等 技术 规范 均 出 自 于 W3C 组 织 。 

HTML 发 展 主要 经 历 以 下 几 个 阶段 : 

超 文 本 标记 语言 (第 一 版 ) : 在 1993 年 6 月 由 Intemet 工程 任务 组 (Intermet Engineering 
Task Force ，IETF) 以 工作 草案 的 形式 发 布 〈 并 非 标准 ) 。 

HTML 2.0: 1995 年 11 月 作为 RFC 1866 发 布 ， 在 RFC 2854 于 2000 年 6 月 发 布 之 后 
被 宣布 已 经 过 时 。 

HTML 3.2: 1996 年 1 月 14 日 ，W3C 推荐 标准 。 
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HTML 4.0: 1997 年 12 月 18 日 ，W3C 推荐 标准 。 

HTML 4.01: 1999 年 12 月 24 日 ，W3C 推荐 标准 。 

ISO/TEC 15445:2000 (ISO HTML) : 2000 年 5 月 15 日 发 布 ， 基 于 严格 的 HTML 4.01 
语法 ， 是 国际 标准 化 组 织 和 国际 电工 委员 会 的 标准 。 

XHTML 1.0: 发 布 于 2000 年 1 月 26 日 ,是 W3C 推荐 标准 ， 后 来 经 过 修订 于 2002 年 
8 月 1 日 重新 发 布 。XHTML 1.0 也 是 目前 各 大 主流 网 站 页 面 遵循 的 规范 。 

XHTML 1.1: 于 2001 年 5 月 31 日 发 布 。 

XHTML 2.0: W3C 工作 草案 。2009 年 10 月 ，W3C 解散 了 XHTML 2 工作 小 组 。 

目前 ， 广 泛 使 用 并 被 浏览 器 支持 的 是 HTML 4.0.1 和 XHTML 1.0 版 本 ，W3C 已 经 制 
定 了 HTML 5 版 本 规范 ， 有 越 来 越 多 的 浏览 器 厂商 开始 支持 HTML 5。 
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通过 前 面 的 学 习 ， 用 户 掌握 了 HIML 的 基本 概念 及 其 特点 ， 本 章 学 习 它 的 基本 结构 。 
实际 上 Web 页 面 〈 网 页 ) 也 是 一 种 文档 ， 文 档 的 结构 和 格式 是 由 HTML 的 元 素 及 其 相关 
属性 来 定义 的 。 学 习 HTML 语言 的 重点 是 掌握 HTML 元 素 及 其 相关 属性 的 语法 。 


本 章 要 点 : 

口 HTML 的 基本 结构 
口 元 素 和 属性 的 语法 
口 建立 一 个 网 页 


2.1 HTML 的 基本 结构 


HTML 语言 中 包含 很 多 元 素 ， 元 素 用 于 结构 化 HTML 文档 ， 并 告知 浏览 器 如 何 呈 现 
网 页 。 
2.1.1 元 素 


- 般 来 说 ， 元 素 是 由 首 标签 、 内 容 和 尾 标签 构成 。 形 象 地 说 ， 它 的 基本 结构 类 似 于 人 
体 结构 ， 主 要 包括 : 


头 部 的 英文 单词 是 “head”。 头 部 的 HTML 语法 如 下 : 
<head> 头 部 的 内 容 </head> 


2. 眼睛 


一 个 网 页 的 眼睛 就 是 它 的 页 面 标题 ， 标 题 的 英文 单词 是 “title”。 标 题 的 HTML 语法 
如 下 : 


<title> 标 题 </title> 
标题 内 容 应 放 在 <head> 和 </head> 之 间 。 语 法 如 下 : 


<head> 
<title> 标 题 内 容 </title> 
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</head> 


3. 身体 

这 是 网 页 最 主要 的 部 分 。 人 们 在 浏览 网 页 时 , 看 到 的 页 面 中 的 内 容 就 是 它 的 身体 部 分 ， 
身体 的 英文 单词 为 “body”。 身 体 的 HTML 语法 如 下 : 

<body> 页 面 内 容 </body> 

通过 第 1 章 学 习 ， 用 户 了 解 了 制作 网 页 可 以 使 用 不 同 的 编辑 软件 ， 本 教程 主要 介绍 使 
用 记事 本 程序 〈 或 者 类 似 的 文本 编辑 器 ) 来 制作 网 页 。 下 面 以 记事 本 程序 为 例 ， 打 开 一 个 
记事 本 程序 ， 按 照 HTML 的 基本 结构 建立 一 个 网 页 。 

实例 2-1: 根据 HTML 的 基本 结构 建立 网 页 


<html> 
<head> 
<title> 
标题 
</title> 
</head> 
<body> 
页 面 内 容 
</body> 
</html> 


以 上 就 构成 了 网 页 的 基本 结构 。 
2.1.2 元素 的 属性 

在 HTML 中 , 大 部 分 元 素 都 包含 有 自己 的 属性 , 属性 可 以 为 标签 中 的 内 容 提 供 不 同 的 
选项 ， 以 产生 不 同 的 效果 。 

属性 在 单 标签 或 双 标签 的 首 标签 中 使 用 。 在 写 代码 时 ， 元 素 及 它 的 属性 必须 放 在 同一 
个 标签 里 ， 且 两 者 之 间 必 须 用 空格 分 开 。 属 性 值 一 般 使 用 双 引 号 〈"") 标示， 如 果 属 性 值 
为 数字 时 ， 可 不 使 用 引号 。 其 语法 如 下 : 


< 标签 名 称 ”属性 1=" 属 性 值 1” 属性 2=" 属 性 值 2"…> 
定义 属性 时 需要 注意 : 
(1) 各 个 属性 之 间 没 有 先后 次 序 之 分 ， 属 性 值 要 用 双 引 号 ("") 括 起 来 ， 属 性 值 为 数 
字 时 则 一 般 不 使 用 双 引 号 。 
(2) 一 个 元 素 需要 同时 设置 几 个 属性 时 ， 属 性 之 间 用 空格 分 开 。 语 法 如 下 : 
<font color="#B0BOBO" size="6" face=" 黑 体 "> 


(3) 当 属 性 值 本 身 包含 引号 时 ， 要 用 另 一 种 引号 做 定 界 符 ， 语 法 如 下 : 


。11 。 


HTML/CSS 网 页 设计 与 开发 一 站 式 学 习 一 一 难点 /案例 /练习 


<input type="button™" value= "click this ,you will get "apple"!' > 


下 面 通过 一 个 实例 了 解 标签 属性 的 作用 。 
实例 2-2: 通过 标签 属性 来 改变 文字 效果 


<html> 
<head> 
<title> 通 过 标签 属性 来 改变 文字 效果 </title> 

</head> 

<body> 

<font face=" 宋 体 " size="5"> 今 天 天 气 是 </font><br> 

<font face=" 黑 体 " size="7"” color="#FF6600"> 晴 天 </font> 
</body> 

</html> 


运行 代码 后 的 效果 如 图 2-1 所 示 。 


通过 标签 属性 来 改变 文字 效果 - Windows Internet Exrplorer 
文件 四 ”编辑 世 ) 查看 中 收 蕊 天 &) 工具 CD 帮助 0 
个 己 ~ [其 0. umt 开 发 一 站 式 学 习 \ 革 二 外 司 | 好 || 芭 
宽 窒 ”大 通过 标 答 展 性 来 疏 变 文 字 丛 " 加 - 砚 " 辐 66O -对 IRO- 


图 2-1 文字 格式 化 后 的 效果 


以 上 代码 中 , 在 <font face=" 宋 体 " size="5"> 标 签 里 ，“font” 是 HTML 的 元 素 ，“face” 
是 “font” 元 素 的 属性 ， 用 于 设置 字体 ，“ 宋 体 ” 是 “face” 的 属性 值 ; “size” 也 是 “font” 
元 素 的 属性 ， 用 于 设置 字体 大 小 ，“5” 是 “size” 的 属性 值 。 下 一 行 代码 同 理 。 


会 遇 到 ， 同 样 的 属性 不 再 重复 介绍 。 


22 建立 网 页 


通过 以 上 内 容 的 学 习 , 用 户 是 不 是 已 经 迫不及待 地 想 要 使 用 HTML 写 代码 了 ,下 面 通 
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过 实例 按 步骤 来 建立 一 个 网 页 。 
2.2.1 建立 一 个 结构 简单 的 网 页 


实例 2-3: 建立 一 个 包含 “这 是 我 的 第 一 个 网 页 ”文字 的 网 页 


圈 设计 分 析 

(1) 首先 输入 首 标签 <html>， 和 相对 应 的 尾 标 签 </html>， 在 <html> 和 </html> 之 间 留 
些 空 行 ， 用 于 书写 其 余 代 码 。 

(2) 写 一 个 “主体 (body) ”标签 ， 它 提供 文档 的 内 容 ， 输 入 “这 是 我 的 第 一 个 网 
页 ”文字 ， 即 <body> 这 是 我 的 第 一 个 网 页 </body>。 

(3) 如 果 要 指定 HTML 文档 的 网 页 标题 (title) 〈 它 将 显示 在 浏览 器 窗口 顶部 ) ， 就 
要 在 头 部 (head) 提供 有 关 信息 。 用 “title” 元 素来 指定 网 页 标题 ， 即 <title> 我 的 第 一 个 网 
页 </title>。 网 页 标题 不 是 显示 在 网 页 里 ， 而 是 显示 在 浏览 器 窗口 的 标题 栏 上 。 


< 人 程序 代码 


<html> 

<head> 

<title> 我 的 第 一 个 网 站 </title> 
</head> 

<body> 

<p> 哇 ! 这 是 我 的 第 一 个 网 站 。</p> 
</body> 

</html> 


接着 ， 需 要 将 它 保存 到 硬盘 上 ， 然 后 在 浏览 器 中 打开 它 。 
(1) 在 记事 本 的 “文件 ”菜单 下 选择 “另存 为 ..” 如 图 2-2 所 示 。 


图 2-2 文件 另存 为 


(2) 这 时 会 弹出 一 个 对 话 框 ， 在 “保存 类 型 ”右边 的 下 拉 菜 单 里 选择 “所 有 文件 ”。 
这 一 点 很 重要 ， 否 则 ， 它 将 被 保存 为 文本 文档 ， 而 不 是 HTML 文档 ， 如 图 2-3 所 示 。 
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【 exnaple_2-2.htal - 记事 本 


另存 为 


文件 名 中; xmple_ 2-2 htal 
保存 类 型 上 
编码 四 


图 2-3 选择 所 有 文件 


(3) 现 在 将 这 个 文档 保存 为 “example 2-2.html”( 后 级 名 “html” 表 明 它 是 一 个 HTML 
文档 ) 。 
(4) 到 保存 的 位 置 中 找到 该 文档 ， 并 用 浏览 器 打开 ， 运 行 代码 后 效果 如 图 2-4 所 示 。 
室 安息 一 个 由 站 丛 - 园 - 响 " 全 了 6 


哇 ! 这 是 我 的 第 一 个 网 站 。 


图 2-4 运行 代码 后 的 效果 


这 时 ， 浏 览 器 中 显示 文字 内 容 : “ 哇 ! 这 是 我 的 第 一 个 网 站 。” 尽管 它 只 包含 一 
网 页 ， 你 也 已 经 完成 了 自己 第 一 个 真正 的 网 站 ! 


> 


2.2.2 ”将 网 页 内 容 格式 化 


有 了 前 面 的 基础 ， 下 面 将 网 页 简单 地 格式 化 ， 使 网 页 中 的 内 容 更 丰富 ， 样 式 更 美观 。 
实例 2-4: 建立 一 个 不 同文 字 颜色 、 大 小 的 内 容 网 页 
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设计 分 析 

(1) 首先 输入 首 标签 <html> 和 相对 应 的 尾 标签 <html>， 在 <html> 和 </html> 之 间 留 些 
空 行 ， 用 于 书写 其 余 代码 。 

(2) 添加 文字 标签 属性 ， 如 字体 、 字 号 及 颜色 等 。 


< 人 程序 代码 


<html> 

<head> 

<title> 不 同色 彩 的 文字 效果 </title> 

</head> 

<body> 

<font face=" 黑 体 " color="#0099FF"> 现 在 是 黑体 </font><br> 
<font size="4" color="#990000"> 我 的 颜色 不 同 </font><br> 
<font face=" 方 正大 黑 " size="7" color="#FF8800"> 我 的 字体 、 颜 色 、 大 小 都 不 一 样 
</font> 

</body> 

</html> 


(3) 现在 将 这 个 文档 保存 为 “example_2-3.html”。 
(4) 用 浏览 器 打开 ， 运 行 代码 后 效果 如 图 2-5 所 示 。 
TEST 
富安 | 条 不 同色 彩 的 文字 效果 从 -加 - 过 - 晤 贡品 


现在 是 黑体 
我 的 颜色 不 同 


我 的 字体 、 颜 色 、 大 小 都 


不 一 样 


图 2-5 文字 格式 化 的 效果 


23 难点 解析 


本 章 的 难点 是 HTML 的 基本 结构 。 其 结构 类 似 人 体 的 结构 ， 所以， 首先 要 记 住 相应 结 
构 的 英文 单词 ， 然 后 按照 头 、 眼 、 身 来 用 标签 定义 即 可 。 


。15S。 


ee 
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2.4 ”高 手 训练 营 


网 页 与 网 站 的 区 别 是 什么 ? 

网 页 中 HTML 的 基本 结构 是 什么 ? 

编写 一 段 简单 的 HTML 代码。 要求 输 入 一 段 文字 “HTML 的 一 个 简单 的 练习 题 ”。 
参照 实例 2-4， 完 成 HTML 中 的 内 容 格式 化 。 要 求 输入 两 行文 字 “HTML 的 一 个 


简单 的 练习 题 ”和 “将 网 页 内 容 格式 化 "。 将 第 一 行文 字 设 置 成 “宋体 ”，“5” 号 字 ， 将 第 
二 行文 字 设置 成 “黑体 "，“7” 号 字 . 


在 HTML 里 的 每 一 个 标签 都 有 其 自身 的 意义 。HTML 标签 由 开始 标签 和 结束 标签 组 
成 ， 开 始 标 签 是 被 尖 括 号 包围 的 元 素 名 ， 结 束 标签 是 被 尖 括 号 包围 的 斜 杠 加 元 素 名 ， 如 
<body> 和 </body>。 某 些 HTML 元 素 没有 结束 标签 ， 如 <br>。 

本 章 要 点 : 

口 标题 文字 标签 <h> 的 语法 

口 嵌 套 标签 的 语法 


3.1 标题 文字 标签 


就 像 新 闻 和 报纸 中 的 标题 一 样 ， 在 网 页 中 标题 文字 能 直接 反映 相关 主题 ， 意 义 至 关 重 
要 。HTML 中 的 标题 文字 是 通过 <hl> 一 <h6> 等 标签 进行 定义 的 。 


3.1.1 ”标题 文字 标签 一 一 <h> 


<hl> 一 <h6> 作 为 标题 文字 标签 ， 依 据 重 要 性 递减 。 使 用 <h> 标 签 可 以 增加 权重 ， 使 
页 面 的 层级 关系 更 清楚 ， 让 搜索 引擎 更 好 地 抓 取 页 面 的 主题 ， 有 利于 搜索 引擎 搜索 到 用 户 
的 页 面 。 其 语法 如 下 : 

<h1> 这 是 一 级 标题 </h1> 

<h2> 这 是 二 级 标题 </h2> 

<h3> 这 是 三 级 标题 </h3> 

<h4> 这 是 四 级 标题 </h4> 

<h5> 这 是 五 级 标题 </h5> 

<h6> 这 是 六 级 标题 </h6> 


根据 网 页 的 定位 、 类 型 、 用 户 搜索 习惯 等 因素 综合 考虑 ， 不 同 网 站 对 标题 标签 的 使 用 
都 不 相同 。 

(1) <hl> 一 级 标题 ， 它 的 地 位 在 页 面 中 跟 关 键 字 的 地 位 一 样 重要 。 一 些 大 型 网 站 将 
<hl> 用 在 LOGO 上 ， 这 样 的 优点 是 : 它 概括 了 整个 页 面 的 内 容 ， 而 且 LOGO 离 “body” 
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很 近 ， 方 便 搜 索引 擎 最 快 地 抓 取 主 题 ， 如 图 3-1 所 示 。 


搜狐 -中 国 最 大 的 门户 网 站 一 Windows Internet Explorer 


[和 SEE TS ww sohm_ com EE pl-| 
文件 EF) 编辑 EE) 查看 收藏 夹 和 ) 工具 CX) 和 助 00 x 二 Snagrt [= 
富 收 总 天 “图 搜狐- 中 国 最 大 的 门户 和 价 " 国 - 本 篇 ”页 面 中 - 安全 @- I 上 WW- >” 


称 /邮箱 /手机 ~ 全 
新 闻 图 片 评论 我 说 两 名 军事 公益 体育 NBA 中 超 S 财经 理财 股票 基金 IT 数码 
天 气 男人 女人 美容 母 婴 健康 绿色 吃喝 促销 旅游 高 尔 夫 文化 读书 
二 : 世 办 和 新 拉 各 2012 纪 办 大 他 排 名 ”北大 二 开交 有 第 和 起 ”10 天 一 口 这 和 革 适 。 庆生 | 
爹 言 列 指导 您 出 国 访 研 i 销 全 
24 万 英 磅 拿 英国 绿卡 9 盟 
党 历 不 高 也 能 月 霖 过 万 上 时 
教 会 中 文 就 会 说 英语 
育 美国 大 学 新 动向 家 全 
纯正 口语 称 寺 职场 装 全 
北大 国学 地 产 和 可 = 
出 ”美国 名 核 来 华 招生 。 大 导演 波兰 斯 基 的 徘 与 向 。 司 刍 和 车 与 毛泽东 的 见面 五 最 山 : 数字 娱乐 第 -区 。 手 你, 加 
< L > 


@ Internet 和 和-” R100% 


图 3-1 一 级 标题 


(2) <h2> 二 级 标题 ， 主 要 出 现在 页 面 的 主体 内 容 的 文章 标题 和 栏目 标题 上 。 三 列 结 
构 一 般 在 中 间 ， 二 列 结构 一 般 在 重要 的 一 边 。 可 与 <h3> 搭 配 使 用 ， 如 图 3-2 所 示 。 
狐 社 区 -中 文 第 一 论坛 -搜狐 - Windows Internet Explorer 
(eB A ee Bx 外 IP -| 
文件 时 编辑 GE) 查看 W) 收藏 夹 Q) 工具 GD) 家 助 0 x 多 sm 图 外 
宽 收 大 天 人 A 搜狐 社区 -中 文 第 一 论坛 -搜狐 租 -" 国 -器 唤 ” 本 中安 人 6 I 具 -大 - ” 


加 
礼物 交易 竟 猜 押宝 ”活动 大 本 营 全 而 兑换 。 实名 版 主 。 。 网友 关 证 。 百 万 重金 县 党 计划 社区 之 星 草 相 


密码 至 录 。 注册 帮助 随便 看 看 进入 社区 当前 在 
Cm lenovome 
九 一 八 ， 致 网 友 们 的 一 封 信 Edge 助 你 放胆 改变 


[活动 :纪念 918 保卫 钓鱼 岛 送 爱 国 T 恤 ] [让 历史 再 次 警醒 世人 : 杂 右 国耻 ] 
[ 思 一 八 ,钓鱼岛 区 域 日 本 邓 开 第 一 枪 吗 ? ] [感人 的 保 钩 由 情思 支 古 动 ] 


有 理性 有 血性 ， 中 华 民 族 是 不 可 战胜 的 民族 


[ 虚 黄 子孙 ,冷静 处 理 钓鱼 岛 问题 ] [不 偷 不 抢 日 系 车 主 伤 不 起 ] 


金钱 面前 亲情 没 了 因 房子 引发 的 家 庭 大 战 


[速球 要 了 钱 还 想 要 我 们 的 房 ] [房子 整整 折磨 了 我 家 3 年 ] 


即刻 搜索 你 的 未 来 | 搜 案 


< 


[8 @ Internet 和 R00% ~ 


图 3-2 二 级 标题 


(3) <h3> 三 级 标题 ， 一 般 在 主要 页 面 的 边 侧 栏 。<h4> 是 它 的 辅助 ， 出 现 频率 不 高 。 
根据 排版 页 面 层 级 关系 不 能 太 深 ， 所 以 <h4>、<h5>、<h6> 一 般 出 现 较 少 ， 如 图 3-3 所 示 。 
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GO: A 


THD ROY ET eNO x rl 回 是 

全 和 大。 | NT 村 区 -中 半生 志 二 - 招 扩 la 盘 - 目 
“中 国外 交 里 话 志 最 光 中 央 对 日 本 旦 朵 [el 

-加 aan 3 i 

， p 活动 大 本 营 


记 方 活动 
[OE 


~ 


医 T ET 


图 3-3 三 级 标题 


下 面具 体 写 一 个 标题 文字 标签 的 程序 代码 。 
实例 3-1: ”通过 <h> 标 签 来 实现 不 同 标题 文字 效果 


<html> 

<head> 

<title> 中 国旅 游 </title> 
</head> 

<body> 

<h1> 旅 游 景 点 大 全 </h1> 
<h2> 华 北 地 区 </h2> 
<h3> 名 胜 古 迹 </h3> 
<h4> 北 京 旅游 </h4> 
<h5> 故 宫 博物 院 </h5> 
<h6> 乾 清宫 </h6> 
</body> 

</html> 


运行 代码 后 效果 如 图 3-4 所 示 。 


SO [Ero ms x [PE 


7 
帘 必 卫 | 碎 中 国 放 盘 - 加 -了 而 -mo- 


旅游 景点 大 全 


华北 地 区 
名 胜 十 迹 
北京 旅游 
该 牢 博物 院 


Ew 


EE 


图 3-4 不 同 标题 文字 的 效果 


从 图 3-4 中 很 直观 地 看 出 ，6 种 不 同 效果 的 网 页 标题 文字 。 
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3.1.2 ”标题 文字 对 齐 方 式 属性 一 一 align 
在 HIML 中 ， 没 有 设置 属性 的 前 提 下 ， 默 认 的 标题 文字 是 左 对 齐 的 ， 基 于 排版 需要 ， 


用 户 可 以 设置 标题 文字 的 对 齐 方式 。 对 齐 方式 的 属性 是 “align”， 它 设置 在 <h> 标 签 中 。 


“align” 的 


其 语法 如 下 : 


<hl a 
za 
<h3 a 


属性 值 包括 左 对 齐 (left) 、 居 中 对 齐 (center) 和 右 对 齐 (right) 3 种 对 齐 方式 。 


ign="left"> 
ign="right"> 


ign="center"> 


实例 3-2: 将 标题 文字 设置 不 同 对 齐 方式 


<html> 
<head> 
<title> 中 国旅 游 </title> 
</head> 
<body> 
<hl align="left"> 旅 游 景 点 大 全 </h1> 
<h2 align="center"> 华 北 地 区 </h2> 
<h3 align="right" > 名 胜 古迹 </h3> 
</body> 
</html> 
运行 代码 后 效果 如 图 3-5 所 示 。 
中 国旅 游 - Windows Internet Explorer 
eT 站 Ci\Docments ma s | | x)| [上 Ppl- 
文件 中) ”编辑 下 ) 查看 W) ”收藏 普 以 ) 工具 IT; 帮助 00 
诊 收 天 59 “| 乱 中 .| 项 中 x 芥 - 加- 局 加 -X6o- 
旅游 景点 大 全 
华北 地 区 
名 胜 古迹 
完成 旺 我 的 电脑 二- l00% ~ 


为 使 网 
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图 3-5 ”标题 文字 的 对 齐 方式 


3.2 内 容 标 签 


页 中 的 内 容 更 加 丰富 多 彩 ，HTML 提供 了 不 同 的 内 容 标签 ， 主 要 包括 文字 标签 
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<font>、 段 落 标签 <p>、 图 片 标签 <img>、 表 格 标签 <table> 等 标签 ， 通 过 相应 的 属性 设置 ， 
可 使 内 容 在 网 页 中 呈现 出 不 同 的 效果 。 具 体 的 语法 和 代码 ， 在 后 面 的 章节 中 将 详细 讲解 。 


3.3 注释 标签 


注释 标签 <!--> 用 来 在 HTML 文档 中 插入 注释 。 用 户 可 使 用 注释 对 代码 进行 解释 ， 便 
于 在 以 后 对 代码 进行 编辑 。 注 释 会 被 浏览 器 忽略 。 

用 户 也 可 以 针对 程序 ， 在 注释 内 容 中 编写 相关 的 信息 。 在 这 种 情况 下 ， 这 些 信息 对 用 
户 是 不 可 见 的 ， 但 是 对 程序 来 说 是 可 用 的 。 一 个 好 的 习惯 是 把 注释 放 入 注释 文本 中 ， 这 样 
可 避免 版 本 较 低 的 浏览 器 把 它们 显示 为 纯 文 本 。 其 语法 如 下 : 


<!-- 这 是 一 段 注释 ， 不 会 在 浏览 器 中 显示 --> 
实例 3-3: 使 用 注释 标签 编辑 注释 文字 


<html> 

<head> 

<title> 注 释 标 签 的 使 用 </title> 

</head> 

<body> 

<!-- 注 释 对 代码 进行 解释 ， 也 便于 在 以 后 对 代码 进行 编辑 --> 
<p> 运 行 代 码 后 ， 观 察 注释 不 会 在 浏览 器 中 显示 。</p> 
</body> 

</html> 


运行 代码 后 效果 如 图 3-6 所 示 。 


注 靶 标签 的 使 用 - Windows Internet Explorer 
文件 中 久 加 下) 查看 中 收藏 严 和) 工具 GD 帮助 
局 | 厦 5 Wm 开发 一 站 式 学 习 \ 弟 ;号 | 寻 XX 


价 - 国 ” 凡 - 避 ED- 


运行 代码 后 ， 我 们 来 看 看 注释 不 会 在 浏览 器 中 显示 


图 3-6 注释 标签 的 使 用 
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3.4 详 套 标签 


所 谓 嵌 套 指 一 个 元 素 里 面包 含 男 一 个 元 素 。 在 HTML 中 ， 大 部 分 标签 是 允许 嵌 套 的 ， 
嵌 套 标签 中 各 个 的 属性 是 通用 的 。 

下 面 以 文字 效果 为 例 ， 通 过 几 个 实例 学 习 嵌 套 标签 应 如 何 使 用 。 

实例 3-4: 输入 “注意 : 使 用 嵌 套 标签 时 ， 必 须 保持 标签 的 完整 性 ”。 其 中 ，“ 注 意 ” 
使 用 “黑体 ”; 将 “使 用 嵌 套 标签 时 ”文字 倾斜 “必须 保持 标签 的 完整 性 ”加 下 划 线 。 
并 将 其 分 成 3 行文 字 


<html> 

<head> 
<title> 幅 套 标 签 的 使 用 </title> 
</head> 

<body> 

<font face=" 黑 体 "> 注意 </font><br> 
<em> 使 用 婴 套 标签 时 </em><br> 
<u> 必 须 保持 标签 的 完整 性 </u> 

</body> 

</html> 


运行 代码 效果 如 图 3-7 所 示 。 
婴 套 标签 的 使 用 - Windows Internet Explorer 
文件 EE) 编辑 于 ) 查看 G) 收 若 天 工具 CI) 帮助 0D 
GO- Bru x 
宽 安 | 将 攻 丰 标 答 的 使 用 偷 - 加 - 锁 " 辐 WO- 


注意 
借 历 旋 案 碳 答 呆 


图 3-7 代码 运行 效果 
以 上 代码 中 ，<body> 标 签 包 含有 文字 <font>、 和 斜体 <em>、 下 划 线 <u>3 个 不 同 的 标签 。 
下 面 将 文字 设置 成 一 行 ， 使 用 嵌 套 标签 来 同时 改变 文字 的 效果 。 
(1) 将 实例 3-4 中 的 文字 在 一 行 显示 ， 并 且 将 字体 都 改 为 “黑体 ”， 使 文字 倾斜 。 主 
体 改动 的 代码 如 下 : 
<font face=" 黑 体 "><em> 注 意 ， 使 用 详 套 标签 时 ， 必 须 保持 标签 的 完整 性 。</em></font> 
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运行 代码 后 效果 如 图 3-8 所 示 。 


说 套 标 签 的 使 用 一 Windows Internet 
文件 中 ” 久 辑 有 查看 收 语 天 和) 工具 吕 D) 帮助 0D 


DO- [Bra-ws7 和 hx 和 
会 安 | 层 蓄 宗 3 的 用 从 -加 -大 - 纪 夯 四 - 


尘 启 ， 苑 有 房 访 大 上 奈 过 987， 必须 保 些 庶 答 的 元 喜 验 . 


图 3-8 ”代码 运行 效果 


从 图 3-8 中 就 可 以 看 出 ， 文 本 显示 效果 同时 发 生 了 变化 。 从 改动 的 代码 中 不 难 发 现 ， 
斜体 标签 <em> 已 经 髓 套 在 文字 标签 <font> 中 了 ， 这 样 使 得 相关 文字 的 字体 和 倾斜 的 效果 就 
会 同时 呈现 。 

(2) 将 实例 3-4 中 的 文字 字体 都 改 为 “黑体 ”， 并 将 文字 倾斜 ， 在 文字 “完整 性 ”下 
方 加 上 下 划 线 。 主 体 改动 的 代码 如 下 : 
<font face=" 黑 体 "> 


<em> 注 意 ， 使 用 嵌 套 标签 时 ， 必 须 保 持 标签 的 <u> 完 整 性 。</u></em> 


</font> 
运行 代码 后 效果 如 图 3-9 所 示 。 


访 套 标签 的 使 用 - Windows Internet Explorer 
文件 中 铂 E) 查看 WD 收藏 天 人 工具 四。 帮助 

GO [Br us-wuts |x 

育 帘 | 痪 坟 丰 标的 使 用 从 - 园 - 币 - 国 而 DO 


洗 疏 ， 硕 万 彼 大 虚 过 9， 必须 保 些 奈 从 的 完 豆 寿 ， 


图 3-9 代码 运行 效果 


在 改动 的 代码 中 ， 用 户 在 文字 标签 中 嵌 套 了 和 斜体 标签 ， 斜 体 标签 中 又 嵌 套 了 下 划 线 标 
签 <u>， 这 样 ， 相 关 文字 的 下 划 线 效果 也 会 同时 呈现 。 
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在 HIML 中 ， 标 签 是 可 以 嵌 套 多 层 的 ， 层 数 越 深 ， 文 字 的 属性 就 越 多 。 


嵌 套 的 标签 都 加 载 完成 ， 浏 览 器 才能 正常 显示 。 有 两 种 代码 的 写法 : 
<!-- 写法 1 --> 


<div> 

<div> 内 容 代码 2</div> 
<div> 内 容 代码 3</div> 
<qdiv> 内 容 代码 4</div> 


</div> 

<!-- 写法 2 --> 
<div> 内 容 代码 2</div> 
<div> 内 容 代码 3</div> 
<div> 内 容 代 码 4</div> 


在 制作 网 页 时 ， 一 般 情况 下 用 户 可 能 会 使 用 写法 1 的 嵌 套 。 如 果 对 用 户 体验 要 求 高 ， 
同时 在 一 些 地 方 嵌 入 的 脚本 会 影响 到 页 面 显示 ， 就 需要 用 写法 2 的 方式 来 书写 源 代码 ， 以 
保证 用 户 体验 。 在 页 面 的 设计 中 减少 嵌 套 的 层次 ， 可 以 加 快 浏览 器 的 加 载 速度 。 


3.6 高 手 训练 营 


HTML 基本 的 标签 都 有 哪些 ? 
什么 是 谋 套 标签 ” 它 的 语法 形式 是 怎样 ? 
将 实例 3-2 中 的 <hl>、<h2> 标 签 代 码 添加 相应 的 注释 内 容 。 
.将 以 下 文字 ， 每 一 句 话 显示 为 一 行 ， 其 中 ， 每 行 居中 对 齐 ， 写 出 相应 的 代码 。 

当 你 写 下 HIML 文本 的 时 候 ， 你 不 能 确 知 在 另外 一 个 浏览 器 中 , 这 些 文本 将 被 如 何 显 
示 。 有 人 用 大 的 显示 器 ， 有 人 用 小 的 。 每 次 用 户 调整 窗口 大 小 时 ， 文 本 都 将 被 重新 格式 化 。 
不 要 想 在 编辑 器 中 写 一 些 空 行 和 空格 来 协助 排版 。 


-a ct 
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文字 是 信息 传达 的 主体 部 分 。 从 最 初 的 网 页 纯 文字 界面 发 展 至 今 ， 文 字 仍 是 其 他 任何 
元 素 无 法 取代 的 。 首 先 ， 因 为 文字 信息 符合 人 的 阅读 习惯 ， 其次， 文字 所 占 存储 空间 小 ， 
节省 用 户 网 上 的 下 载 和 浏览 时 间 。 

文字 除了 有 具有 传递 信息 ， 告 知 网 站 内 容 的 功能 外 ， 还 可 以 通过 设置 其 属性 来 增强 视觉 
传达 效果 ， 提 高 网 页 感染 力 。 文 字 呈 现 效果 的 好 坏 直接 影响 整个 页 面 的 质量 ， 所 以 应 精心 
设置 。 


口 文字 标签 的 各 种 属性 
D 空格 与 特殊 字符 的 显示 


4.1 实体 标签 与 逻辑 标签 


实体 标签 所 强调 的 是 一 种 实体 行为 。 比 如 ， 将 一 段 文字 用 <b> 标 签 加 粗 了 〈“b” 是 英 
文 “bold”( 加 粗 ) 的 简写 )， 于 是 向 浏览 器 传达 ， 浏 览 器 应 该 加 粗 后 显示 这 段 文字 ， 所 以 ， 
<b> 标 签 所 传达 的 意思 只 是 加 粗 ， 没 有 任何 其 他 作用 。 

逻辑 标签 是 强调 文档 多 辑 的。 同样 是 显示 字体 效果 ， 如 <strong> 标 签 ， 从 字面 理解 就 
可 以 知道 它 是 强调 的 意思 ， 所 以 ， 这 个 标签 向 浏览 器 传达 了 一 个 强调 、 加 重 显示 某 段 文字 
的 消息 ， 并 非 是 通知 浏览 器 应 该 如 何 显示 。 

默认 情况 下 ， 用 在 网 页 中 ， 上 述 两 个 标签 均 起 加 粗 字 体 的 作用 ， 不 同 之 处 在 于 ，<b> 
标签 是 一 个 实体 标签 , 它 所 包围 的 文字 将 被 设 为 “bold”( 粗 体 ); 而 <strong> 标 签 是 一 个 迪 
辑 标签 ， 其 作用 是 加 强 字符 的 语气 。 一 般 来 说 ， 加 强 文字 的 语气 是 通过 将 文字 变 为 粗 体 来 
实现 的 。 

所 以 说 ， 实 体 标 签 是 告诉 浏览 器 ， 应 该 以 何 种 格式 显示 文字 ; 迪 辑 标签 告诉 浏览 器 ， 
这 些 文字 有 怎么 样 的 重要 性 。 

但 是 为 了 符合 现在 W3C 的 标准 ， 在 显示 相同 的 效果 时 ， 还 是 推荐 使 用 过 辑 标签 。 


4.2 文字 标签 一 一 <font> 


不 同 的 文字 效果 可 以 突显 不 同 的 主题 ， 将 文字 格式 化 后 可 以 增强 文字 的 可 读 性 ， 就 像 
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人 们 在 使 用 Word 编辑 文字 一 样 。 在 HIML 中 ， 文 本 编辑 的 标签 
的 设置 ， 可 以 改变 文字 的 字体 、 大 小 、 粗 体 及 颜色 等 效果 。 


4.2.1 设置 文字 字体 属性 一 一 face 


人 是 <font>， 六 


通过 相关 


属性 


“face” 是 <fon 亿 标签 的 属性 ， 用 于 设置 文字 字体 。 网 页 中 显示 的 字体 从 浏览 器 的 系统 
中 调用 。HTML 页 面 默认 采用 的 是 宋体 ， 所 以 为 了 保持 字体 一 致 ， 建 议 采 用 宋体 。 其 语法 


如 下 : 


<font face=" 字 体 "> 输入 的 文字 内 容 </font> 


“face” 属 性 值 可 以 为 多 个 ， 一 般 按照 代码 中 显示 字体 的 顺序 ， 依 次 进行 显示 。 也 就 


是 说 ， 如 果 “ 字 体 1” 在 系统 字体 中 不 存在 的 话 ， 则 默认 显示 “字体 2”， 依 次 类 推 。 


实例 4-1: 使 用 “face” 属 性 来 设置 字体 效果 


<html> 

<head> 

<title> 不 同 的 字体 效果 </title> 

</head> 

<body> 

<font face=" 黑 体 "> 现在 的 文字 是 黑体 </font><br><br> 
<font face=" 幼 圆 "> 现在 的 文字 是 幼 圆 </font><br><br> 
<font face=" 隶 书 "> 现在 的 文字 是 隶书 </font><br> 
</body> 

</html> 


运行 代码 效果 如 图 4-1 所 示 。 


不 同 的 字体 效果 -Windows Internet Explorer 
文件 中 ”编辑 下) 查看 Y) 收藏 天) 工具 IJ) 帮助 0) 

GO Br ums-wzsI ma x 

窗 安 多 不同 的 字体 效果 从 - 园 - 蜗 - 他 RD- 


现在 的 文字 是 黑体 
现在 的 文字 是 幼 园 


现在 的 文字 是 事 忆 


图 4-1 设置 字体 效果 


四 在 HIML 中 , 设置 的 字体 都 是 浏览 器 中 安装 过 的 字体 ,所 以 用 户 在 网 页 中 设置 字 
体 时 ， 尽 量 不 要 使 用 过 多 的 特殊 字体 ， 否 则 浏览 器 将 使 用 默认 字体 代替 。 
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4.2.2 ”字体 大 小 属性 一 一 size 


“size” 也 是 <fon 忆 标签 的 属性 , 用 于 设置 文字 大 小 。“size” 的 属性 值 为 “1” 至 “7”， 


默认 为 “3”。 用 户 还 可 以 在 “size” 属 性 值 数字 之 前 加 上 “十 ”或 “一 ”字符 ， 


对 于 字号 初始 值 的 增 量 或 减 量 。 其 语法 如 下 : 


<font 


size=" 属 性 值 "> 输入 的 文字 内 容 </font> 


实例 4-2: 使 用 “size” 属 性 进行 文字 大 小 设置 


<html> 
<head> 


<title> 文 字 大 小 的 设置 </title> 


</head> 

<body> 

<font size="1"> 沁 园 春 雪 </font><br> 
<font size="2"> 沁 园 春 雪 </font><br> 
<font size="3"> 沁 园 春 雪 </font><br> 
<font size="4"> 沁 园 春 雪 </font><br> 
<font size="5"> 沁 园 春 雪 </font><br> 
<font size="6"> 沁 园 春 雪 </font><br> 
<font size="7"> 沁 园 春 雪 </font><br> 
</body> 

</html> 


运行 代码 后 效果 如 图 4-2 所 示 。 


文字 大 小 的 设置 - Windows Internet Explorer 
文件 人 E) 编辑 E) 查看 WW 收藏 严 () 工具 CD) 帮助 和 D 
GO . Bru x : 
空 次 | 大 六 了 三 | | 偷 - 回 - 咒 - 辐 76o- 


ss 
沁 园 春 
沁 园 春 
沁 园 春 


沁 园 春 雪 
沁 园 春 雪 


图 4-2 设置 文字 大 小 效果 


来 指定 相 


下 面 在 “size” 属 性 值 前 面 加 上 “十 ”、“ 一 ”字符 ， 更 灵活 地 设置 文字 大 小 尺寸 。 
实例 4-3: 使 用 “十 ”、“ 一 ”字符 设置 文字 大 小 
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<html> 

<head> 

<title> 使 用 “十 ”、“ 一 ”字符 设置 文字 大 小 </title> 
</head> 

<body> 

<font size="6"> 白 日 依 山 尽 </font><br> 

<font size="7"> 黄 河 入 海流 </font><br> 

<font size="+2"> 欲 穷 千里 目 </font><br> 

<font size="-1"> 更 上 一 层 楼 </font><br> 


</body> 
</html> 
运行 代码 后 效果 如 图 4-3 所 示 。 
”字符 设置 文字 大 小 - Windows Internet Explorer 属 ] 牛 | 攻 
文件 中) 编辑 人 E) 查看) 收藏 天 和) 工具 CD) 帮助 如 
司 、| 古 nuam 开 娄 一 荆 池 习 第 | 梧 t+ XX 


图 4-3 使 用 字符 设置 文字 大 小 


4.2.3 ”文字 粗 体 和 斜体 标签 一 <b>、<strong> 和 <i>、<em> 


在 本 章 第 一 节 ， 用 户 就 了 解 到 标签 <b> 可 使 被 作用 文字 加 粗 ， 使 文字 更 加 醒目 ， 例 如 ， 
文章 的 标题 部 分 。<strong> 称 为 强调 标签 ， 也 能 使 文字 加 粗 ， 目 前 ， 它 的 使 用 比 <b> 标 签 更 
频繁 。 其 语法 如 下 : 


<strong> 这 是 粗 体 文字 </strong> 
<b> 这 也 是 粗 体 文字 </b> 


标签 <i> 可 使 被 作用 文字 倾斜 ， 达 到 特殊 的 效果 ， 如 文章 的 日 期 。<em> 称 为 强调 标签 ， 
也 能 达到 文字 倾斜 的 效果 ， 目 前 ， 它 的 使 用 比 <i> 标 签 更 频繁 。 其 语法 如 下 : 


<em> 这 是 斜体 文字 </em> 
<i> 这 也 是 斜体 文字 </i> 
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实例 4-4: 使 用 <stronge>、<em> 标 签 增加 文字 的 粗 体 、 斜 体 效 果 


<html> 

<head> 

<title> 文 字 粗 体 、 和 斜体 设置 </title> 

</head> 

<body> 

<font face=" 黑 体 " size="5"> 粗 体 ，<strong> 沁 园 春 雪 </strong><br> 
<font face=" 隶 书 " size="5"> 斜 体 ，<em> 沁 园 春 雪 </em><br> 
</body> 

</html> 


运行 代码 后 效果 如 图 4-4 所 示 。 


文字 程 体 、 午 体 设 置 - Windo 

EECTIEE3 
GD 》~ | 攻 0; vm 开发 一 站 式 学 功 第 | 加 | 全 | E 
实 安居 文 守 相 体 . 射 人 设置 全 -加 - 禹 -里 m 枯 四 - 


柱 体 : 沁 园 春 雪 
科 体 : 兴国 条 轨 


图 4-4 设置 文字 粗 体 、 斜 体 效果 


下 面 使 用 婴 套 标签 ， 来 改变 文字 的 效果 。 

实例 4-5: 输入 文字 “国际 油价 17 日 突然 暴跌 ， 纽 约 轻 质 原油 跌幅 为 2.4%”， 设 置 文 
字 的 字体 为 “宋体 ”， 使 用 <strong>、<en> 标 签 ， 分别 对 本 段 话 中 的 数字 “17” 和 “2.4%” 
进行 加 粗 、 倾 斜 设置 


<html> 

<head> 

<title> 幅 套 标签 </title> 

</head> 

<body> 

<font face=" 宋 体 " size="5"> 国 际 油价 <strong><em>17</em></strong> 日 突然 暴跌 ， 纽 
约 轻 质 原油 跌幅 为 <strong><em>2 .4%</em></strong><br> 

</body> 

</html> 


运行 代码 后 效果 如 图 4-5 所 示 。 
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二 Windows Internet Explorer 


国际 油价 77 日 突然 暴跌 ， 纽 约 轻 质 原油 跌幅 为 
2 多 


图 4-5 使 用 堪 套 标签 来 设置 文字 


4.2.4 文字 颜色 标签 一 一 <color> 


网 页 的 初学 者 可 能 更 习惯 使 用 一 些 漂亮 的 图 片 作为 自己 网 页 的 背景 ， 或 将 文字 设置 成 
各 式 各 样 的 颜色 。 但 浏览 一 下 大 型 的 网 站 ， 你 会 发 现 它们 更 多 运用 的 是 白色 、 蓝 色 、 黄 色 
等 简单 醒目 的 颜色 。 搭 配 的 颜色 得 当 ， 可 使 得 网 页 显得 大 方 和 温 声 。 更 重要 的 是 ， 这 样 可 
以 大 大 加 快 浏览 者 打开 网 页 的 速度 。 

一 般 来 说 ， 网 页 的 背景 色 应 该 柔和 一 些 、 淡 一 些 ， 再 配 上 深 色 的 文字 ， 使 文字 看 起 来 
自然 、 和 舒畅 。 而 为 了 追求 醒目 的 视觉 效果 ， 可 以 为 标题 使 用 较 深 的 颜色 。 颜 色 搭配 不 宜 太 
过 花哨 ， 这 样 反而 哗众取宠 。 

“color” 是 <fon 忆 标签 的 属性 之 一 ， 用 于 设置 文字 颜色 。 颜 色 的 属性 值 在 “000000” 与 
“FFFFFF” (十 六 进 制 ) 之 间 ， 前 面 加 上 “#” 符号， 就 可 以 改变 字体 的 颜色 。 其 语法 如 下 : 


<font color="# 颜 色 代 码 "> 文字 内 容 </font> 
实例 4-6: 一 些 常用 到 的 文字 颜色 代码 


<html> 

<head> 

<title> 字 体 颜 色 </title> 

</head> 

<body> 

浅 红色 文字 : <font color="#dd0000"> 字 体 的 颜色 丰富 多 彩 </font><br /> 
深 红色 文字 : <font color="#660000"> 字 体 的 颜色 丰富 多 彩 </font><br /> 
浅 绿色 文字 : <font color="#00dd00"> 字 体 的 颜色 丰富 多 彩 </font><br /> 
深 绿色 文字 : <font color="#006600"> 字 体 的 颜色 丰富 多 彩 </font><br /> 
浅黄 色 文 字 : <font color="#dddd00"> 字 体 的 颜色 丰富 多 彩 </font><br /> 
深 黄色 文字 : <font color="#666600"> 字 体 的 颜色 丰富 多 彩 </font><br /> 
浅 蓝 色 文字 : <font color="#0000dd"> 字 体 的 颜色 丰富 多 彩 </font><br /> 
深蓝 色 文字 : <font color="#000066"> 字 体 的 颜色 丰富 多 彩 </font><br /> 
浅 紫 色 文字 : <font color="#dd00dd"> 字 体 的 颜色 丰富 多 彩 </font><br /> 
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深 紫 色 文 字 : <font color="#660066"> 字 体 的 颜色 丰富 多 彩 </font><br /> 


</body> 
</html> 


运行 代码 后 效果 如 图 4-6 所 示 。 


文件 四 “ 编 加 四 查看 如 、 收 大 天 册 工具 ) 帮助 四 


Geo- [By vm wa [x| 下 
从 -四 ”各 - 避 ND- 


文字 ， E34- 上 Ea 二 
: 颜色 丰富 多 彩 


字体 的 颜色 二 富 多 彩 


图 4-6 常用 到 的 文字 颜色 效果 


以 下 是 制作 网 页 时 ， 对 网 页 背景 色 和 文字 色彩 搭配 积累 的 经 验 ， 这 些 颜 色 可 以 作为 正 


文 的 底 色 ， 也 可 以 做 标题 的 底 色 ， 再 搭配 不 同 的 字体 ， 会 有 不 错 的 效果 。 
(1) 做 标题 。 背 景色 为 “#6699CC”、“#66CCCC”、“#B45B3E”、 


时 配 白 色 文字 。 


(2) 正文 。 背 景色 为 “# 丁 BFBEA”、“#D5F3F4”、“#D7FFF0”、 


“#00B271” 


“#f0DAD2” 


强调 文字 主题 的 效果 ， 还 可 以 通过 对 文字 加 下 划 线 和 删除 线 来 实现 。<u> 标 签 定义 文 


本 的 下 划 线 。<strike> 标 签 定义 文本 的 删除 线 。 其 语法 如 下 : 


<u> 文 字 内 容 </u> 
<strike> 文 字 内 容 </strike> 


实例 4-7: 输入 一 段 文字 “牛奶 袋 的 外 表 是 用 染料 来 印刷 的 这 些 字 ， 长 期 用 嘴 咬 牛奶 
袋 的 话 ， 就 容易 造成 重金 属 铅 的 中 毒 ”， 并 将 “长 期 用 嘴 咬 牛奶 袋 的 话 ” 加 粗 、 倾 斜 并 加 


上 下 划 线 ; 将 “就 容易 造成 重金 属 铅 的 中 毒 ” 加 上 删除 线 


<html> 

<head> 
<title> 下 划 线 和 删除 线 效 果 </title> 
</head> 

<body> 


<font face=" 宋 体 " size="5" color="#dd0000"> 牛奶 袋 的 外 表 是 用 染料 来 印刷 的 这 些 字 ， 
<strong><em><u> 长 期 用 嘴 咬 牛奶 袋 的 话 </u></em></strong>， <strike > 就 容易 造成 
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重金 属 铅 的 中 毒 </strike ></font > 
</body> 
</html> 


以 上 代码 使 用 了 妖 套 标签 ， 运 行 代码 后 效果 如 图 4-7 所 示 。 


下 基线 和 开除 线 效果 -Windows Internet Erplorer 
文件 中 编辑 外) 查看 名 ”收藏 夷 了 工具 CI) 帮助 四 

OO Br 
实 站 大 TMBN 果 | | 丛 ” 国 ”名 - 芝 ND- 


牛奶 袋 的 外 表 是 用 染料 来 印刷 的 这 些 字 ， 帮 筋 历 
1 让， 就 存 易 和 条 二 


图 4-7 运行 代码 后 的 效果 


4.2.6 ”上 标 标签 、 下 标 标签 一 一 <sup>、< sub> 


<sup> 标 签 可 定义 文本 的 上 标 。 包 含 在 <sup> 标 签 和 其 结束 标签 <sup> 中 的 内 容 ， 将 会 
以 当前 文本 中 字符 高 度 的 一 半 来 显示 ， 上 标的 字体 和 字号 与 当前 文本 相同 。 

相对 应 的 <sub> 标 签 可 定义 文本 的 下 标 。 包 含 在 <sub> 标 签 和 其 结束 标签 </sub> 中 的 内 
容 将 会 以 当前 文本 中 字符 高 度 的 一 半 来 显示 ， 字 体 和 字号 不 变 。 这 两 个 标签 在 数学 公式 、 
科学 符号 和 化 学 公式 中 都 非常 有 用 。 其 语法 如 下 : 


<sup> 文 字 内 容 </sup> 
<sub> 文 字 内 容 </sub> 


实例 4-8: 通过 下 划 线 和 删除 线 对 相关 文字 进行 设置 


<html> 

<head> 

<title> 上 标 标 签 、 下 标 标签 </title> 

</head> 

<body> 

<font face=" 宋 体 " size="5" color="#dd0000">X <sup>2</sup><br/> 
Y <sub> 今 天 是 个 晴天 </ sub> 

</font > 

</body> 

</html> 


运行 代码 后 效果 如 图 4-8 所 示 。 
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上 标 标签 、 下 标 标签 一 本 indo" 


立 件 四 、 编 当 人 0 喜 玫 W 电 半 坟 
GO- [Brrr sr x BE-7, sue 
宽 实感 上 村 标签 .下 标 标签 


图 4-8 文本 加 了 上 、 下 标的 效果 


43 文字 方向 


在 制作 具有 中 国 古代 特色 的 网 站 ， 如 历史 、 书 法 、 名 胜 古 迹 旅游 等 网 站 时 ， 如 果 用 竖 
排 的 文字 ， 配 以 古色 古 香 的 背景 及 朴实 陈旧 的 色彩 ， 在 视觉 上 会 获得 意 想不到 的 效果 。 文 
字 的 竖 排 有 几 种 方法 : 

(1) 使 用 <br> 标 签 。 在 HTML 中 ， 为 每 个 需要 竖 排 显示 的 文字 后 ， 加 上 <<br> 标 
签 〈 实 际 上 这 也 是 换行 标签 ， 在 下 一 章 段落 编辑 中 介绍 ) ， 该 方法 适用 于 文字 较 少 时 ， 如 
果 输 入 的 文字 多 ， 此 方法 就 有 点 麻烦 ， 且 效率 较 低 。 语 法 如 下 : 


文 <br> 字 <br> 内 <br> 容 
实例 4-9: 输入 “和 白 日 依 山 尽 ”， 并 设置 为 竖 排 文字 


<html> 

<head> 

<title> 文 字 方 向 </title> 

</head> 

<body> 

<font face=" 隶 书 " size="5" color="#dd0000"> 白 <br> 日 <br> 依 <br> 山 <br> 尽 
</font > 

</body> 

</html> 


以 上 代码 运行 效果 如 图 4-9 所 示 。 
(2) 软 回 车 法 。 在 网 页 制作 时 ， 直 接 为 需要 竖 排 的 文字 输入 软 回 车 ， 输 入 方法 是 每 
输入 一 个 字 加 入 一 个 软 回 车 (“Shift + 回 车 ”) ， 在 Dreamweaver 和 FrontPage 里 方法 都 
相同 。 


(3) 样式 表 (css) 。 通 过 设置 样式 表 的 文字 属性 即 可 实现 。 在 后 面 章节 中 再 具体 进 
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行 讲解 。 


| 文件 中 编 沼 介 ” 查 乔 WD 中 评 夫 由 工具 外 币 助 加 
EE | 大 nn 下属 3 学 牙 第 [| 好 X | [一 
伪 " 加 -各 


图 4-9 文字 竖 排 的 效果 


4.4 ”空格 和 特殊 字符 


ee HTML 里 有 特别 的 含义 ， 如 小 于 号 “<” 和 大 于 号 “> 之 ”表示 HTML 标 
签 的 开始 入 结束 ， 这 个 小 于 号 、 大 于 号 不 显示 在 最 终 看 到 的 网 页 中 。 如 果 用 户 希望 在 网 页 
aie 号 ， 该 怎么 办 呢 ? 这 就 必须 在 HTML 源 代码 中 用 到 字符 实体 。 
一 个 字符 实体 主要 包括 三 部 分 : 第 一 部 分 是 一 个 “&” 符 号 ; 第 二 部 分 是 实体 名 字 或 
者 是 “#” 加 上 实体 编号 ， 第 三 部 分 是 一 个 “; ”号 。 


4.4.1 空 


在 HTML 中 ， 空 格 的 代码 是 “&nbsp;”。 一 个 “&nbsp;” 代 表 半 和 角 情 况 下 的 一 个 空格 ， 
即 半 个 汉字 。 其 语法 如 下 : 


<p> 空 enbsp; gnbsp; 格 </p> 
实例 4-10: 输入 文字 “ 欲 穷 千里 目 ， 更 上 一 层 楼 ”， 并 在 文字 中 使 用 空格 进行 设置 


<html> 

<head> 

<title> 空 格 的 使 用 </title> 

</head> 

<body> 

<font face=" 隶 书 " size="5" > 
欲 穷 千里 目 <br/> 

更 snbspg&nbspgnbsp&gnbsp&nbsp 上 <br/> 
一 gnbsp&nbsp 层 gnbspgnbsp 楼 

</font> 
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</body> 
</html> 


运行 代码 后 效果 如 图 4-10 所 示 。 


图 4-10 运行 代码 后 的 效果 
如 果 在 代码 中 直接 使 用 空格 , 则 显示 效果 和 字符 实体 是 不 一 样 的 。 如 将 主体 代码 改 为 : 


欲 穷 干 里 目 <br/> 
更 上 <br/> 
一 层 楼 


运行 代码 后 效果 如 图 4-11 所 示 。 
1 较 句 他 ) 查看 (WD 收藏 严 纹 ) 工具 人 帮 且 0D 
》” | 古 n Wom 开发 一 站 式 守 习 \ 第 |W| 他 || 
全 "有 目 入 - 让 ， 


图 4-11 直接 使 用 空格 的 效果 


从 运行 后 的 效果 图 中 就 能 看 到 ， 不 论 在 字符 之 间 输 入 多 少 个 空格 ， 仅 有 一 个 半角 空格 
会 被 接受 ， 其 余 的 被 浏览 器 忽略 掉 ， 所 以 根据 实际 需要 ， 正 确 设置 空格 。 


4.4.2 ”特殊 字符 
除了 空格 ， 在 HTML 中 还 有 一 些 特殊 字符 ， 在 输出 到 浏览 器 时 需要 转换 ， 表 4-1 是 常 
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用 到 的 需要 转换 的 特殊 字符 。 


表 4-1 需 转 换 的 特殊 字符 


字符 字符 实体 
&lt: 
Ea Ret; 
& &amp; 
ska &quot: 
X 乘 号 &times 
二 除 号 &divide 
@ 版 权 &copy; 
@ 注册 商标 Rreg: 


45 难点 解析 


本 章 的 难点 在 于 文字 的 格式 化 。 我 们 先 来 看 看 英文 字体 设计 ， 英 文 的 正文 字体 有 很 多 
可 以 选择 ， 中 文 的 正文 字 有 两 种 :宋体 和 黑体 。 在 传统 的 版 式 设 计 中 ， 设 计 者 们 都 喜欢 做 
英文 的 排版 ， 这 是 为 什么 呢 ? 从 视觉 上 来 看 ， 英 文 的 组 合 很 容易 形成 线 和 面 的 关系 ， 而 且 
字母 有 节奏 感 。 中 文字 相对 来 说 ， 单 调 、 孤 立 、 不 流畅 。 

回 到 网 站 中 文字 的 设计 ， 设 计 者 基本 上 不 用 考虑 在 字体 上 选择 ， 需 要 做 的 就 是 别 把 文 
字 看 成 字 ， 而 是 看 成 点 ， 文 字 的 视觉 设计 其 实 就 是 处 理 点 、 线 、 面 的 关系 。 单 个 字 成 点 ， 
- 行 字 成 线 ,一 段 字 成 面 。 这 是 版 式 设计 最 基本 的 原理 ， 制 作 网 页 时 需要 强化 这 样 的 感觉 。 


4.6 高手 训练 营 


1. 实体 标签 和 逻辑 标签 有 什么 不 同 ? 

2. 空格 的 代码 是 什么 ， 它 与 普通 汉字 字符 有 什么 不 同 ? 

3. 将 下 面 文字 ， 第 一 句 设置 为 “黑体 ，4 号 ”， 第 二 句 设置 为 “楷体 ，4 号 ， 加 粗 ”， 
第 三 句 设置 为 “隶书 ，4 号 ， 红 色 ， 并 加 下 划 线 ”。 写 出 相应 的 代码 。 

背景 图 像 是 否 增加 了 页 面 的 加 载 时 间 ? 背景 图 像 是 否 与 页 面 中 的 其 他 图 像 搭配 良 

好 ? 背景 图 像 是 否 与 页 面 中 的 文字 颜色 搭配 良好 ? 
4. 将 下 面 一 行文 字 前 两 个 字 之 间 空 一 个 汉字 。 写 出 相应 的 代码 。 
背景 图 像 使 页 面 文本 易于 阅读 。 
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网 页 中 文字 的 设置 固然 重要 ， 而 一 段 清 楚 、 简 洁 、 美 观 的 文字 段落 设置 ， 更 容易 吸引 
访问 者 的 注意 力 。 所 以 在 编写 网 站 内 容 的 过 程 中 ， 要 分 析 访 问 者 的 阅读 习惯 。 那 么 如 何 设 


置 才能 达到 最 好 的 效果 ， 本 章 对 段落 设置 进行 详细 讲解 。 
本 章 要 点 : 


口 段落 标签 的 对 齐 属 性 
O 换行 标签 的 使 用 


网 页 是 否 美观 ， 很 大 程度 上 取决 于 对 文字 的 排版 。 在 页 面 中 出 现 大 段 的 文字 ， 通 常 采 
用 分 段 进 行规 划 ， 同 时 对 文字 换行 也 有 较 严格 的 要 求 。 
5.1.1 段落 标签 


为 了 排列 整齐 、 清 晰 ， 在 文字 段落 之 间 常 用 <p> 来 做 标记 ，“p” 是 英文 “paragraph” 
的 缩写 。 文 字段 落 的 开始 标签 为 <p>， 结 束 标 签 为 <p>，</p> 是 可 以 省 略 的 ， 因 为 下 一 个 
<p> 的 开始 就 意味 着 上 一 个 <p> 的 结束 。 其 语法 如 下 : 


<p> 文 字 内 容 </p> 
实例 5-1: 通过 <p> 标 签 来 设置 段落 


<p> 


<html> 

<head> 

<title> 段 沙 的 设置 </title> 

</head> 

<body> 

<p> 萎 摩 不 振 的 暑期 档 终于 要 在 月 末 爆 发 了 : 《蝙蝠 侠 4: 黑暗 骑士 崛起 》 已 确定 引进 时 间 ， 将 于 8 
月 27 日 登陆 内 地 ; 与 此 同时 ，《 超 凡 蜂 蛛 侠 》 昨 日 宣布 ， 再 度 将 档期 提前 一 一 8 月 27 日 与 《 蝙 
蝠 侠 》 同 日 登陆 内 地 抢 钱 。9 月 初 ， 德 利 斯 科 特 时 隔 25 年 后 的 科幻 回归 之 作 《 普 罗 米 修 斯 》 也 
将 来 搅局 。 三 部 好 莱 坞 大 片 直 接 把 一 众 票 国产 片 打 成 炮灰 。</p> 

<p><font face=" 黑 体 ">《 蜘 蛛 侠 》 主 打 3D</font></p> 

<p> 宣 布 档期 提前 的 《超凡 蜂 蛛 侠 》 在 昨日 告知 院 线 经 理 ， 将 档期 再 次 提前 ， 与 《蝙蝠 侠 》 同 日 出 
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击 。 电 影 将 视角 拉 回 彼得 帕克 的 高 中 时 代 ， 故 事 基 本 上 推翻 了 前 三 部 的 体系 ， 扮 演 蜂 蛛 侠 的 也 
不 再 是 托 比 马 硅 尔 ， 换 成 了 新 星 安德鲁 加 菲尔德 。</p> 

</body> 

</html> 


运行 代码 后 效果 如 图 5-1 所 示 。 


ET ET 


ED By uniswrene | x [35 到 
让 这 下 RBG EB 2 


EE eb A 和 黑 早 骑士 帐 起 》 局 
定 引 进 寺 间 ， al 和 《超凡 网 蛛 潜 > 昨日 

布 ， 再 庆 将 档 攻 提前 - 月 内 弛 抢 钱 。9 月 a 

Ey 3 也 将 来 挤 月 。 三 部 好 
莱 坞 大 片 直接 把 一 众 票 国产 片 打 


《 若 妹 供 》 主 打 习 
宜 布 档期 提前 的 < 申 凡 九 暴 侠 》 在 昨日 告知 院 瑟 经 理 ， 将 档期 再 次 识 讲 ， 与 
电影 将 视 ! 


忒 彤 蝠 亿 》 问 日 出 击 . 角 拉 加 被 得 听 克 的 高 中 时 代 ， 故 事 基 本 上 礁 
ER 扮 往 几 晓 侠 的 也 不 再 是 托 比 马 素 尔 ， 换 成 了 新 星云 守 得 
于 


图 5-1 使 用 <p> 标 签 设 置 段落 效果 


通过 <p> 标 签 的 设置 ， 可 以 将 大 段 的 文字 规划 得 井井有条 。 通 过 仔细 观察 图 5-1 就 会 
每 段 文字 的 开头 没有 空 2 个 中 文字 符 ， 这 是 不 符合 写作 习惯 的 。 我 们 使 用 前 面 学 习 
的 空格 来 进行 设置 。 在 段落 的 首 行 开头 加 上 4 个 “&nbsp:” 字 符 。 主 体 代 码 应 改 为 : 


<p>&nbsp; &nbsp; sgnbsp;&nbsp; 萎 靡 不 振 的 暑期 档 终于 要 在 月 末 爆 发 了 : 《蝙蝠 侠 4: 黑暗 骑 
士 崛 起 》 已 确定 引进 时 间 ， 将 于 8 月 27 日 登陆 内 地 ， 与 此 同时 ，《 超 凡 蜂 蛛 侠 》 昨 日 宣布 ， 
再 度 将 档期 提前 一 一 8 月 27 日 与 《蝙蝠 侠 》 同 日 登陆 内 地 抢 钱 。9 月 初 ， 德 利 斯 科 特 时 隔 25 
年 后 的 科幻 回归 之 作 《 普 罗 米 修 斯 》 也 将 来 搅局 。 三 部 好 莱 坞 大 片 直 接 把 一 众 票 国产 片 打 成 炮 
灰 。</p> 

<p><font face=" 黑 体 ">gnbsp; gnbsp; gnbsp; gnbsp;《 蜂 蛛 侠 》 主 打 3D</font></p> 

<p>&nbsp;&nbsp;&nbsp;&nbsp; 宣 布 档期 提前 的 《超凡 蜘蛛 侠 》 在 昨日 告知 院 线 经 理 ， 将 档期 
再 次 提前 ， 与 《蝙蝠 侠 》 同 日 出 击 。 电 影 将 视角 拉 回 彼得 帕克 的 高 中 时 代 ， 故 事 基本 上 推翻 了 
前 三 部 的 体系 ， 扮 演 蜂 蛛 侠 的 也 不 再 是 托 比 马 硅 尔 ， 换 成 了 新 星 安德鲁 加 菲尔德 。</p> 


运行 代码 后 效果 如 图 5-2 所 示 。 


交 伯 全 辐 六 加 查看 他 ) 中 麻 天 () IAD WO 
GO Brimre-vrse x Ba-7, ms 


高 安 | 下 5 失主 从 -上 和 目 部 - 瑟 了 oO 


压 音 不 扰 的 县 期 档 终于 委 在 月 木 爆发 了 ，《 蝙 嫩 侠 4， 轩 暗 骑 士 媚 起》 
已 确证 引进 时 间 ， 将 于 8 月 EN rr 芯 超 及 由 蛛 使》 叫 
直 布 ， 再 度 将 栏 期 提前 一 一 8 月 27 日 与 《 屿 晤 | 日 登陆 内 地 近 钱 - 9， 
初 , nt et A 的 己 
部 好 茶 坞 大片 直接 把 一 众 曙 国产 片 条 成 起 大 ， 


《 晤 蚌 侠 》 主打 汪 


寺 布 准 基 提前 的 《超凡 风 昕 鞭 》 在 昨日 告知 尝 续 经理， 将 栏 朋 再 次 提 
前 , 与 < 加 全 全 > 同 同日 出 击 。 电 影 将 视角 拉 回 彼得 垢 克 的 高 中 时 代 ， 训 事 基 
a 部 的 体系 ， 拆 演 物 味 侠 的 也 不 骨 是 沫 和 马 可 尔 ， 换 度 了 新 星 


图 5-2 修改 后 的 段落 效果 
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从 图 5-2 中 不 难看 出 ， 加 上 空格 之 后 的 网 页 美观 多 了 。 
5.1.2 ”段落 对 齐 属 性 一 一 align 


段落 中 的 文字 有 时 需要 不 同 的 对 齐 方式 ， 默 认 对 齐 方式 是 左 对 齐 。<p> 标 签 的 对 齐 属 
性 为 “align”， 通 过 设置 “align” 属 性 值 为 “left”、“right” 或 “center”， 即 可 实现 段 
落 文 字 左 对 齐 、 右 对 齐 和 居中 对 齐 的 效果 。 其 语法 如 下 : 


<p align="left"> 
<p align="right"> 


<p align="center"> 
实例 5-2: 使 用 段落 对 齐 属 性 进行 段落 规划 


<html> 

<head> 

<title> 段 落 的 属性 设置 </title> 

</head> 

<body> 

<palign="left">gnbsp; gnbsp; gnbsp; gnbsp; 萎靡 不 振 的 暑期 档 终于 要 在 月 末 爆 发 了 : 《 蝙 
蝠 侠 4: 黑暗 骑士 崛起 》 已 确定 引进 时 间 , 将 于 8 月 27 日 登陆 内 地 ; 与 此 同时 ，《 超 凡 蜂 蛛 侠 》 
昨日 宣布 ， 再 度 将 档期 提前 一 一 8 月 27 日 与 《蝙蝠 侠 》 同 日 登陆 内 地 抢 钱 。9 月 初 ， 德 利 斯 科 
特 时 隔 25 年 后 的 科幻 回归 之 作 《 普 罗 米 修 斯 》 也 将 来 搅局 。 三 部 好 莱 坞 大 片 直接 把 一 众 票 国产 
片 打 成 炮灰 。</p> 

<p align="right"><font face=" 和 黑体 ">gnbsp; gnbsp; gnbsp; gnbsp; 《蜘蛛 侠 》 主 打 

3D</font></p> 

<p align="center">gnbsp; gnbsp; &nbsp; gnbsp; 宣 布 档期 提前 的 《超凡 蜂 蛛 侠 》 在 昨日 告 
知 院 线 经 理 ， 将 档期 再 次 提前 ， 与 《蝙蝠 侠 》 同 日 出 击 。 电 影 将 视角 拉 回 彼得 帕克 的 高 中 时 代 ， 
故事 基本 上 推翻 了 前 三 部 的 体系 ， 扮 演 蜂 蛛 侠 的 也 不 再 是 托 比 马 奎 尔 ， 换 成 了 新 星 安德鲁 加 菲 
尔 德 。</p> 

</body> 

</html> 


运行 代码 后 效果 如 图 5-3 所 示 。 


撕 菏 的 必 性 变 闫 -Windovs In 


文件 时 编程) 查看 WD 眉 涤 天 | 中 
GO Pram rey x PET 
高 病 后 的 证 | 盘 - 回 - 曲 - 巨 oO 


矿 摩 不 扰 的 暑期 档 终于 要 在 月 木 焊 改 了， 旺旺 侠 4， 黑 莉 驴 十 类 起 
2 同上 了 内 地， 上 四 直人 > 
商科 凡人 有 生起 的 秆 下 训 和 半 计 = 
让 全 人 车 且 大 


《 霹 哄 侠 》 主 打 澡 
宣布 栏 朋 提前 的 《超凡 贱 蚜 侠 》 在 昨日 告知 院 线 经 理 , 省 有 有 次 提 


与 《 畴 晤 全 > 同日 出 击 。 电 影 将 视角 拉 回 彼得 凰 充 的 高 中 对 代 ， 故 事 基 
bE i 和 全 下 0 三 各 六 成 新星 
安德鲁 加 菲 针 德 。 


图 5-3 ”使 用 对 齐 属性 后 的 效果 
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5.1.3 ”段落 居中 对 齐 标签 一 一 <center> 

对 于 大 段 文 字 ， 有 时 需要 整个 段落 在 页 面 中 居中 对 齐 ， 这 就 要 用 到 <center> 标 签 。 其 
语法 如 下 : 

<center> 段 落 文字 </center> 


实例 5-3: 使 用 <center> 标 签 设置 段落 居中 对 齐 


<html> 

<head> 

<title> 段 落 居中 对 齐 </title> 

</head> 

<body> 

<center> 

<p >《 诗 经 》</p> 

关 关 瞧 鸣 ， 在 河 之 洲 。 窃 穹 淑女 ， 君 子 好 述 。<br/> 
参差 苍 菜 ， 左 右 流 之 。 窃 穹 淑女 ， 窗 襟 求 之 。<br/> 
求 之 不 得 ， 窗 寨 思 服 。 优 哉 游 哉 ， 思 转 反 侧 。<br/> 
参差 若菜 ， 左 右 采 之 。 窃 究 淑女 ， 琴 巧 友之 。<br/> 

参差 存 菜 ， 左 右 医 之 。 穷 究 淑 女 ， 钟 鼓乐 之 。 <br/> 

</center> 

</body> 

</html> 


运行 代码 后 效果 如 图 5-4 所 示 。 


段落 居中 对 齐 -Windows Internet Explorer 
文件 到 ) 编 志 中 查看 0 收 案 天 人) 工具 GD) 大助 00 


GO Br |x| [EE pl 
寅 窑 大 有 兴 居中 放下 从 "和 目 ”篇 " 疏 吕 > 
世 诗 经 》 


闫 关 豚 鸠 ， 在 河 之 洲 。 厅 充 漆 妇 ， 君 于 好 玉 。 
参差 行 茶 ， 左 右 流 之 。 芒 带 卡 女 ， 守 守 求 之 。 
求 之 不 得 ， 思 服 。 载 ， 架 转 反 侧 。 
参差 行 菜 ， 左 右 采 之 。 穷 究 丘 女 ， 苍 落 友 之 。 
双 差 行 某 ， 左 右 芝 之。 新 充 洒 女 ， 钟 鼓 志 之 。 


图 5-4 整个 段落 居中 对 齐 效果 


5.2 段落 换行 标签 


在 段落 中 ， 使 用 <p> 标 签 会 在 文本 行 之 间 ， 或 者 图 片 和 文本 之 间 自 动 创建 额外 较 大 的 
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间隔 。 为 避免 同一 组 的 文本 之 间 出 现 太 大 的 间隔 ， 只 是 简单 地 开始 新 的 一 行 ， 可 以 使 用 换 
行 标签 <br>。 

5.2.1 换行 标签 一 一 <br> 


<br> 标 签 是 单 标签 (意味 着 它 没有 结束 标签 ， 因此 ， 出 现 <br>、</b 户 是 错误 的 ) 。<br> 
和 <br 放 标签 相似 ， 在 目前 的 浏览 器 中 ， 两 者 效果 相同 ， 都 起 到 强制 换行 的 作用 ， 但 未 来 的 
发 展 方向 <br> 可 能 用 得 更 多 。 语 法 如 下 : 


段落 中 的 文字 < br> 段 落 中 的 文字 <br> 段 落 中 的 文字 <br> 
实例 5-4: 使 用 <br> 标 签 对 段落 进行 换行 设置 


<html> 

<head> 

<title> 使 用 br 标签 </title> 

</head> 

<body> 

<p>gnbsp; gnbsp; gnbsp; gnbsp; 心 的 本 色 该 是 如 此 。 成 ， 如 朗 月 照 花 ， 深 潭 微 澜 ， 不 论 顺 逆 ， 
不 论 成 败 的 超然 ， 是 扬 鞭 策 马 ， 登 高 临 远 的 驿站 ， 败 ， 仍 滴水 穿 石 ， 汇 流入 海 ， 有 穷 且 益 坚 ， 
不 坠 青云 的 傲 岸 ， 有 "将 相 本 无 主 ， 男 儿 当 自强 "的 个 强 。<br> 荣 ,江山 依旧 ， 风 采 犹 然 ， 恰 沧 
海 巫 山 ， 熟 视 岁 月 如 流 ， 浮 华 万 千 ， 不 丑 过 眼 烟 云 ， 辱 ， 膀 下 韩信 ， 雪 底 苍 松 ， 宽 若 羽 化 之 仙 ， 
知 退 一 步 ， 海 阔 天 空 ， 不 肯 因 哮 废 食 。</p> 

</body> 

</html> 


运行 代码 后 效果 如 图 5-5 所 示 。 


Hows Internet Explorer 
XN MNO FO REO IRO WMO 


DD [Bovis | x 5 
宽 究 | 恩人 用 村 和 [个 - 功 - 吕 -也 XEO- 


心 的 本 色 该 是 如 此 。 成 ， i 全。 Te 不 论 成 败 

的 超然 ， 疙 让 六 登高 临 远 的 驿站 ， 败 ， 汇流 入 海 ， 有 家 
了 青云 的 尖 详 ， 有 “将 相 本 天 主 ， a 的 仿 强 。 

荣 , 人 风采 犹 然 ， 恰 沧海 于 山 ， 熟 视 岁 月 如 流 ， 祥 华 万 于 ， 不 履 过 

Es 渴 , 疯 3 雪 底 营 松 ， 宛 若 羽化 之 仙 ， 知 退 一 步 ， 海 半天 空 ， 


图 5-5 使 用 换行 标签 之 后 的 效果 
从 图 5-5 不 难看 出 ， 使 用 <b 上 标签 后 ， 换 行 后 的 间隔 正常 ， 且 下 一 行 的 格式 设置 不 变 。 
5.2.2 不 换行 标签 一 一 <nobr> 
当 段 落 文字 输入 到 达 浏览 器 的 边界 后 将 自动 换行 ， 但 是 当 调整 浏览 器 的 大 小 时 ， 文 字 
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ae 所 以 ， 在 不 需要 换行 的 部 分 用 双 标签 <nobr>、</nobr> 来 进行 


设置 ， 这 样 就 可 以 不 受 


览 器 窗口 大 小 变化 的 影响 。 其 语法 如 下 : 


<nobr> 段 落 中 的 文字 </nobr> 
实例 5-5: 综合 使 用 <br> 和 <nobr> 标 签 对 段落 进行 设置 


<html> 
<head> 


<title> 综 合 使 用 换行 标签 </title> 


</head> 
<body> 


<p>&nbsp; gnbsp; gnbsp; gnbsp; 心 的 本 色 该 是 如 此 。<br><nobr> 成 ,如 朗 月 照 花 , 深 潭 微 澜 ， 
不 论 顺 逆 ， 不 论 成 败 的 超然 ， 是 扬 鞭 策 马 ， 登 高 临 远 的 驿站 ， 败 ， 仍 滴水 穿 石 ， 汇 流入 海 ， 有 
穷 且 益 坚 ， 不 坠 青云 的 傲 岸 ， 有 "将 相 本 无 主 ， 男 儿 当 自 强 "的 个 强 。</nobr><br> 荣 ， 江山 
依旧 ， 风 采 犹 然 ， 恰 沧海 巫山 ， 熟 视 岁 月 如 流 ， 浮 华 万 千 ， 不 导 过 眼 烟 云 ， 辱 ， 膀 下 韩信 ， 雪 
底 苍 松 ， 宛 若 羽化 之 仙 ， 知 退 一 步 ， 海 阔 天 空 ， 不 肯 因 哮 废 食 。</P> 


</body> 
</html> 


运行 代码 后 效果 如 图 5-6 所 示 。 


综合 使 用 按 行 标签 
EECTIETORETIETOEZT 
GO Bruen x [38 

寅 帘 | 詹 妆 供用 执行 从 EB .dL 


心 的 本 色 该 是 如 此 。 


如 流 ， 学 但 万 千 ， 不 局 过 
TF 韩信 ， 各 放 苦 检 ， Ei 知 退 一 步 ， 将 半天 宇 ， 


图 5-6 综合 使 用 换行 和 不 换行 标签 


5.3 插入 水 平分 隔 线 


为 了 修饰 段落 , 在 页 面 排版 中 插入 水 平分 隔 线 , 可 以 在 视觉 上 将 文档 分 隔 成 各 个 部 分 ， 
使 得 网 页 中 段落 的 排版 更 加 美观 。 默 认 情 况 下 水 平分 隔 线 占 一 行 。 


5.3.1 水 平分 隔 线 一 一 <hr> 


水 平分 隔 线 的 标签 是 
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<hr>， 同 <br> 标 签 一 样 也 是 单 标签 。 


第 5 章 段落 编辑 


实例 5-6: 使 用 水 平分 隔 线 进行 段落 设置 


<html> 

<head> 

<title> 分 隔 线 的 设置 </title> 

</head> 

<body> 

<p align="center"> 不 同体 质 人 群 怎样 吃 鸡蛋 才 健 康 ? </p> 

<hr/> 

<p>&gnbsp; gnbsp; gnbsp; gnbsp; 生活 节奏 的 加 快 ， 导 致 都 市 白领 工作 压力 越 来 越 大 ， 熬 夜 、 电 
脑 前 久 坐 等 带 来 的 疲劳 感 ， 也 不 断 显现 出 来 。 鸡 蛋 中 的 蛋白 质 、 卵 磷脂 、 维 生 素 A、 维 生 素 B1、 
维生素 B2、 钙 、 铁 、 维 生 素 D， 都 是 都 市 白领 恢复 体力 的 必 备 元 素 。</p> 

<p>&gnbsp; gnbsp; gnbsp; gnbsp; 卵 磷脂 ， 对 抗 脑 疲 劳 一 一 大 脑 的 主要 成 分 是 卵 磷脂 ， 脑 疲劳 正 
是 由 于 卵 磷脂 的 损失 所 致 。 蛋 黄 中 丰富 的 卵 磷脂 可 以 补充 大 脑 所 需 的 营养 ， 帮 助 大 脑 恢复 活力 
</p> 

<p>&nbsp; gnbsp; gnbsp; gnbsp; 维生素 B， 对 抗 压力 一 一 鸡蛋 中 的 维生素 B， 有 助 于 把 糖 转化 
成 能 量 ATP， 对 抗 压力 。</p> 

<p>&nbsp; gnbsp; gnbsp; gnbsp; 铁 元 素 , 对 抗 氧 不 足 一 一 铁 质 不 足 使 和 人 脸色 鞭 黄 , 精神 易 疲 备 。 
每 100 克 鸡 蛋黄 含 铁 150 毫克 ， 可 以 有 效 补充 人 体 造 血 ， 增 强 血 液 运输 氧 和 营养 物质 的 能 力 。 
</p> 

</body> 

</html> 


运行 代码 后 效果 如 图 5-7 所 示 。 


EEC 
| 种 1 rm 开发 一 直 式 学 习 \ 第 五 意 \H 了 \e XX je 
傅 " 国 - 避 " 人 DTD- 会 TR0D-” 


不 同体 质 人 群 怎样 吃 鸡 蛋 才 健 康 ? 


和 全 越 未 越 大 ， 二 电脑 前 久 坐等 带 未 
的 疲劳 感 ， 也 不 断 显 现 出 来， 鸡蛋 中 的 下 白 质 、 界 磷 腊 、 维 生 素 4、 维生素 Bl、 维 生 
索 B2、 征 、 铁 ， 维生素 0， 


h 帮 甩 ， 对 抗 脑 疲劳 一 一 大 蚁 的 主要 成 分 是 孵 磋 息 ， 脑 疲 荔 正 是 由 于 那 磷 蕴 的 
和 蛋黄 中 丰富 的 饰 锋 甩 可 以 补充 大 脑 所 需 的 营养， 帮助 大 腑 恢复 活力 


力 维 生 票 B， 对 抗 压力 一 鸡蛋 中 的 维生素 8， 有 助 于 把 糖 转化 成 能 量 ATP， 对 抗 压 


铁 元 素 ， 对 抗 氧 不 足 一 一 铁 质 不 足 使 人 洽 色 痿 黄 ， 精 神 易 阁 息 。 每 100 克 鸡蛋 黄 
含 铁 150 旦 克 ， 可 以 有 效 补充 人 体 造 血 ， 增 强 血 被 运输 氛 和 营养 物质 的 能 力 。 


图 5-7 插入 水 平分 隔 线 


5.3.2 水平 分隔 线 的 属性 

对 于 不 同 的 页 面 ， 默 认 单一 的 分 阳线 线条 样式 显然 不 能 满足 要 求 。 可 以 通过 对 <hr/> 
标签 添加 相应 的 属性 来 进行 设置 ， 常 用 的 属性 包括 : 

(1) “width” 和 “size” 属 性 。“width” 即 分 隔 线 的 宽度 ，“size” 即 分 隔 线 的 高 度 。 


。43 。 


HTMI/CSS 网 页 设计 与 开发 一 站 式 学 习 一 一 难点 /案例 /练习 


默认 的 属性 值 单 位 为 像素 ， 也 可 以 用 百分比 来 表示 分 隔 线 所 占 空 间 的 比例 。 
(2) “align” 属 性 。 即 对 齐 方式 ， 类 似 于 前 面 所 介绍 的 <p> 标 签 的 “align” 属 性 。 
(3) “color” 属 性 。 即 颜色 ， 根 据 实际 页 面 的 需要 设置 分 隔 线 的 不 同 颜色 。 
(4) “noshade” 属 性 。 当 分 隔 线 设 置 了 高 度 时 ， 使 用 “noshade” 属 性 可 以 使 分 隔 线 
具有 立体 和 阴影 效果 。 
实例 5-7: 为 水 平分 隔 线 添 加 相应 的 属性 


<html> 

<head> 

<title> 分 隔 线 的 属性 设置 </title> 

</head> 

<body> 

设置 了 500 像素 宽度 并 且 右 对 齐 的 分 隔 线 : <br > 

<hr width="500" align="right"/> 

设置 了 50s 宽 度 并 且 居中 对 齐 的 分 隔 线 : <br > 

<hr width="50%" align="left"/> 

设置 了 100 像素 的 厚度 并 且 设置 了 浅 蓝 色 的 分 隔 线 : <br > 
<hr size="100" color="#0000dd"/> 

设置 了 50 像素 的 厚度 并 且 使 用 noshade 的 分 隔 线 : <br > 
<hr size="50" noshade="noshade"/> 

</body> 

</html> 


运行 代码 后 效果 如 图 5-8 所 示 。 


分 隔 线 的 属性 设置 Windows Internet Explorcr 


文件 中” 编 旨 区 ) 查看 WD 收 荐 天 Q) 工具 CD) 帮助 


GO [Bru snare x [Es 去 万 可 
ba 全 "国名 "时 -全 TAW-” 
设置 了 500 像 素 宽度 并 且 右 对 齐 的 分 隔 线 ， 

设置 了 50 宽 度 并 且 居 中 对 齐 的 分 而 线 ， 


设置 了 100 像 素 的 厚度 并 且 设 置 了 浅 蓝 色 的 分 甩 线 ， 


设置 了 50 像 素 的 厚度 并 且 使 用 nochade 的 分 隔 线 ， 


图 5-8 设置 水 平分 隔 线 的 属性 


5.4 难点 解析 


本 章 难点 也 是 网 站 制作 过 程 中 最 直接 的 一 个 问题 ， 就 是 文字 段落 的 排版 ， 有 些 网 站 管 
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理 者 把 网 站 排版 得 很 漂亮 ， 例 如 ， 哪 些 地 方 需要 用 逗号 ， 哪 些 地 方 用 空格 ， 哪 些 地 方 需要 
换行 会 使 浏览 者 轻松 浏览 等 ， 这 些 文字 段落 排版 直接 影响 浏览 者 对 网 站 的 态度 。 如 对 于 公 
司 网 站 ， 一 个 排版 严格 有 条 有 理 的 网 站 肯定 会 让 用 户 信任 ， 交 易 的 成 功率 也 会 相应 提高 。 
因此 ， 我 们 提出 以 下 排版 的 规则 ， 和 希望 对 用 户 有 所 帮助 

(1) 对 国内 浏览 者 来 说 ， 每 段 首 行 必须 空 两 格 ， 也 就 是 首 段 要 缩 进 两 个 字符 。 

(2) 不 要 大 量 使 用 粗 体 ， 仅 仅 在 真正 重要 的 少数 文字 上 使 用 ， 这 样 才能 保证 粗 体 的 
突出 效果 。 

(3) 尽量 避免 使 用 带 下 划 线 的 文字 ， 这 样 的 文字 很 容易 被 误导 成 链接 。 

(4) 需要 突出 的 地 方 可 变换 颜色 ,但 颜色 一 定 要 与 背景 颜色 是 反 色调 ， 否 则 就 会 影 
响 浏览 效果 。 

(5) 使 用 真正 的 省 略 号 ， 而 不 是 几 个 句号 来 表示 点 。 

(6) 不 要 一 个 段落 接 一 个 段落 。 一 个 段落 要 空 出 一 至 二 行 ， 一 般 一 个 回 车 就 可 以 了 ， 
这 样 就 会 主 次 分 明 ， 段 落 间 除 非 有 上 下 文 意思 的 大 转折 大 跳跃 ， 否 则 尽量 不 要 有 空 行 。 段 
内 换行 应 为 软 回 车 ， 另 起 一 段 应 为 硬 回 车 。 

(7) 如 果 文字 内 容 比 较 长 ， 最 好 是 分 几 页 显示 ， 这 样 看 上 去 简短 并 不 累 ， 更 方便 浏览 。 


5.5 高手 训练 营 


1， 段落 标签 的 对 齐 属性 有 哪些 ? 
2. 换行 标签 与 不 换行 标签 的 效果 有 哪些 区 别 ? 
3， 使 用 换行 和 不 换行 标签 制作 以 下 网 页 ， 完 成 后 效果 如 图 5-9 所 示 。 


使 用 换行 和 强制 不 换行 标签 Windows In 
文件 中 编辑 E) 查看 WJ 收藏 殉 人 ) 工具 (I) 帮助 0 
GO [Bru x 
痪 安 | 大 BING。 | | 位 ”四 ” 扣 - 导 页 面 中 -~ 


黄 稚 楼 


音 人 已 乘 黄 拆 去 ， 此 地 空余 黄 扑 楼 
黄 匆 一 去 不 复 返 ， 白 云 千 载 空 悠 烙 
晴 川 历历 汉阳 树 ， 芳 草 姜 姜 购 驳 洲 。 日 曹 乡 关 何 处 是 ? 烟波 江上 使 人 悉 。 


图 5-9 效果 图 


4. 综合 使 用 段落 标签 制作 网 页 ， 完 成 后 效果 如 图 5-10 所 示 。 
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综合 使 用 段落 标签 - Windows Internet Erplorer 
文件 中 编辑 中 查看 中 收 大 天 W) 工具 中 帮助 中 
OO- Br ists + Xx [5s 
窄 安居 轩 合 使 用 段 营 生 答 | 全- 目 ” 吉 - 避 ED- 


黄 鹤 楼 


昔 人 已 乘 黄 拆 去 ， 此 地 空余 黄 拆 楼 。 
黄 裤 一 去 不 复 返 ， 白 云 千 载 宝 你 您。 
晴 川 历历 汉阳 树 ， 芳 草 获 姜 鸡 热 洲 。 
日 慕 乡 关 何 处 是 ? 烟波 江上 使 人 悉 。 


图 5-10 效果 图 
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图 形 图 像 的 出 现 ， 打 破 了 网 页 初期 单纯 的 文字 界面 ， 也 带 来 了 新 的 直观 表现 形式 。 图 
形 图 像 往往 能 引起 人 们 的 注意 ， 激 发 阅读 兴趣 ， 带 给 人 的 视觉 印象 要 优 于 文字 ， 在 这 个 提 
倡 网 页 设计 多 元 化 、 个 性 化 发 展 的 今天 ， 合 理 地 运用 图 形 图 像 可 以 增加 网 页 界面 的 视觉 冲 
击 力 ， 有 助 于 体现 网 页 整体 的 设计 创意 。 


图 像 标签 <img> 的 “src” 和 “alt” 属 性 
绝对 路 径 和 相对 路 径 的 区 别 

如 何 设置 图 像 的 大 小 
设置 图 像 的 对 齐 方式 

添加 背景 图 片 


BB 


6.1 添加 图 像 


在 网 页 本 身 的 内 容 不 是 很 丰富 时 ， 添 加 图 形 图 像 可 以 使 网 页 活跃 起 来 ， 如 果 网 页 界面 
的 内 容 本 身 已 很 充实 ， 那 么 仅 靠 文字 表述 ， 可 能 显得 单调 ， 甚 至 给 人 枯燥 的 感觉 ， 而 图 形 
图 像 所 带 来 的 趣味 性 ， 可 以 使 网 页 焕发 出 活力 ， 达 到 吸引 人 、 打 动人 的 日 的。 所 以 在 图 形 
图 像 设 计 的 过 程 中 要 多 思考 ， 独 树 一 帜 才能 增加 网 页 的 记忆 度 ， 最 终 达 到 出 奇 制胜 的 传达 
效果 。 

网 页 中 常用 的 图 像 格式 包括 “jpeg”“gif”“png”“bmp” 等 , 其 中 ,，“jpeg” 和 “gif” 
这 两 种 格式 压缩 比 高 ， 得 到 了 规范 浏览 器 的 支持 ， 且 下 载 速 度 快 ， 不 需要 浏览 器 安装 插件 
即 可 直接 浏览 。 


6.1.1 图 像 标 签 一 一 <img> 


HTML 中 图 像 标签 是 <img>， 它 是 单 标签 ,“img” 是 英文 “image” 的 缩写 ， 表 示 “ 图 
像 ” 的 意思 。 从 技术 上 讲 ，<img> 标签 并 不 会 在 网 页 中 插入 图 像 ， 而 是 从 网 页 上 链接 图 像 。 
想 要 在 页 面 上 显示 一 个 图 像 ， 需 要 使 用 它 的 “src” 属 性 .“src” 是 英文 “source” 的 缩写 ， 
表示 “ 源 ” 的 意思 。“src” 的 属性 值 是 URL (Uniform Resource Locator)， 中 文 翻 译 为 通用 
资源 标示 符 ， 也 就 是 所 要 显示 图 像 的 存储 路 径 。 语 法 如 下 : 
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<img src=" 图 像 文件 所 在 的 路 径 ”> 


外 “src” 中 的 URL 既 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 。 绝 对 路 径 就 是 Internet 
上 资源 的 完整 地 址 。 使 用 绝对 路 径 定位 的 文件 比较 清晰 ， 缺 点 是 如 果 文 件 移动 ， 
就 需要 重新 设置 所 有 的 相关 链接 ; 相对 路 径 指 的 是 相对 于 当前 文档 的 资源 ， 如 
"images/1jpg"。“/” 表 示 网 站 根 目录 ，“../” 表 示 父 目录 。“./” 或 者 不 写 任 何 
锋线 表示 相对 于 当前 路 径 的 目录 。 建立 网 站 最 好 用 相对 URL， 这样， 域名 和 目录 
改变 了 都 不 受 影响 。 


实例 6-1: 在 网 页 文字 内 容 中 ， 插 入 图 像 


<html> 

<head> 

<title> 插 入 图 像 </title> 

</head> 

<body> 

<h3 align="center"> 故 宫 博物 院 简介 </h3><br/> 

<p>&nbsp;&nbsp;&nbsp;&gnbsp; 故 宫 位 于 北京 市 中 心 ， 旧 称 紫 禁 城 。 于 明代 永乐 十 八 年 (1420 
年 ) 建成 ， 这 里 曾 居住 过 24 位 皇帝 ， 是 明 、 清 两 代 的 皇宫 ， 无 与 伦比 的 古代 建筑 杰作 ， 世 界 现 
存 最 大 、 最 完整 的 木质 结构 的 古 建筑 群 。 

</p> 

<center> 

<img src=" 故 宫 .jpg" > 

</center> 

<h4 align="left" > 鸟 辐 故宫 </h4><br/> 

<center> 

<img src=" 鸟 敬 故 宫 .jpg"” > 

</center> 

<p>&gnbsp; gnbsp; gnbsp; gnbsp; 故宫 全 部 建筑 由 “前 朝 ” 与 “内 廷 ”两 部 分 组 成 ， 四 周 有 城 墙 
围绕 。 四 面 由 简 子 河 环抱 。 城 四 角 有 角楼 。 四 面 各 有 一 门 ， 正 南 是 午 门 ， 为 故宫 的 正门 。 故 富 
四 面 环 有 高 10 米 的 城墙 ， 城 墙 南北 长 961 米 ， 东 西 宽 753 米 ， 城 外 有 一 条 宽 52 米 、 长 3800 
米 的 护城河 环绕 ， 构 成 完整 的 防卫 系统 。 故 宫 总 体 布局 为 中 轴 对 称 ， 布 局 严谨 ， 秩 序 井然 ， 寸 
砖 片 瓦 缘 遵循 着 封建 等 级 礼 制 , 映 现 出 帝王 至 高 无 上 的 权威 。 传 说 , 玉皇大帝 有 10000 个 宫殿 ， 
而 皇帝 为 了 不 超越 神 ， 所 以 故宫 有 只 修建 了 9999 个 宫殿 。</P> 

</body> 

</html> 


运行 代码 后 效果 如 图 6-1 所 示 。 

浏览 器 在 显示 有 图 像 的 页 面 时 ， 需 要 一 个 个 图 像 文件 的 加 载 ， 加 载 图片 需 要 时 间 ， 所 
以 ， 在 网 页 中 要 合理 使 用 图 片 。 根 据 经 验 ， 通 过 下 面 的 儿 个 方法 可 以 改善 由 图 像 带 来 的 加 
载 和 延迟 问题 : 
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Pe 


组 -目标 :本 6 日 - 登 IRU- ”| 


故 言 博物 院 芮 介 


旋 富 位 于 北京 中 心 ， 旧 称 签 桂城 于 明 人 未 朱士 从 年 《1420 年 ) 奸 底 这 里 关 届 住 这 24 个 皇 帘 ， 是 明 ， 请 两 代 的 皇宫 ， 无 与 
倍 比 的 古 发 夺 缸 本 作 ， 世 界 现存 录 大 ， 最 宛 整 的 本 质 结 惟 约 古 建筑 天 


图 6-1 在 网 页 中 插入 图 像 


1. 使 用 简单 的 图 像 

在 页 面 中 少 使 用 那些 风景 照片 ， 并 且 避 免 在 图 像 中 出 现 大 块 的 空白 背景 和 不 必要 的 边 
框 及 其 他 占用 空间 的 元 素 ， 尽量 使 用 大 面积 一 致 的 颜色 ;避免 使 用 将 两 种 相近 的 颜色 混合 
起 来 后 获得 的 第 三 种 颜色 ， 这 种 技术 会 极 大 地 降低 图 像 的 可 压缩 性 。 


2. 图 像 使 用 超 链 接 
为 像素 较 大 的 图 像 专门 提供 一 个 链接 ， 这 样 访问 者 就 可 以 根据 自己 的 实际 需要 来 决定 


是 否 打开 或 下 载 该 图 片 ， 以 此 来 减少 等 待 时 间 。 

3， 设 定 图 像 的 大 小 

设置 图 像 的 属性 ， 将 图 像 的 高 度 和 宽度 都 包含 在 它 的 标签 里 面 。 通 过 指定 这 些 属 性 ， 
就 可 以 省 去 浏览 器 用 额外 的 步骤 下 载 、 检 验 并 计算 图 像 在 页 面 中 的 尺寸 。 


6.1.2” 源 文件 属性 一 一 alt 
“alt” 属 性 用 来 给 图 像 显 示 一 ee “alt” 属 性 值 是 由 用 户 自行 定义 的 。 
当 浏览 器 没有 完全 加 载 图 像 时， 浏览 器 显示 这 个 “ 交 交 百 文本” 来 代 蔡 图 像 ， 当 浏览 器 加 载 
完 图 像 后 ， 将 刀 标 指针 停 儿 在 图 像 上 方 时 也 会 显示 相应 的 本 .给 页 面 上 的 图 像 才 加 上 <alt” 
属性 是 一 个 好 习惯 ， 它 有 助 于 显示 信息 ， 这 对 纯 文本 浏览 器 很 有 用 。 其 的 语法 为 : 


<img src=" 图 像 文 件 所 在 的 路 径 " alt=" 图 像 的 交互 文本 "> 
里 的 代码 加 上 “alt” 属 性 ， 改 动 的 代码 如 下 : 


在 实例 6-1 中 ， 将 <img> 标 签 


<center> 
<img src=" 故 宫 .jpg" 


</center> 


alt= "这 是 午 门 "> 
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<h4 align="left" > 鸟 梧 故 宫 </h4><br/> 
<center> 
<img src=" 鸟 敬 故 宫 .jpg"” alt= "航拍 故宫 博物 院 "> 


</center> 


当 浏 览 器 没有 完全 加 载 相应 的 图 像 时 显示 交互 文本 ， 效 果 如 图 6-2 所 示 。 


ET TE TE 
GO [Bru mrs er 
褒 安居 A 一 


故宫 博物 院 简介 


故宫 位 于 北京 市 中 心 ， 卓 称 著 棕 城 。 于 明代 钞 乐 十 儿 年 〔1420 年 ) 建成 ， 这 里 闪 居 住 过 24 个 皇 市 ， 录 明 、 消 两 代 的 皇宫 ， 无 与 
佑 比 的 二 发 天 亲本 让 ， 世 时 现存 景 大 、 基 元 吾 的 木质 结构 的 古 如 筑 群 . 


乌 酸 故 言 


ER 城 四 角 有 和 角 枯 。 四 三 各 有 一 门 ， 正 南 
53 米 ， 城 外 有 一 争 宽 52 米 、 长 3800 水 的 护城河 环 
i 寻 等 级 礼 制 ， 喘 现 出 有 王 到 高 无 


图 6-2 加载 图 像 时 显示 交互 文本 


6.2 图 像 属性 


同文 字 、 段 落 的 格式 化 相同 ， 图 像 也 有 相应 的 属性 。 通 过 相关 的 属性 设置 ， 使 图 像 在 
网 页 中 达到 最 好 的 显示 效果 。 


6.2.1 ”设置 图 像 的 大 小 一 一 height、width 


<img> 标 签 的 “height” 和 “width” 属 性 用 来 设置 图 像 的 大 小 尺寸 。 其 中 ，“height” 
表示 图 像 的 高 度 ，“width” 表 示 图 像 的 宽度 。 两 属性 既 可 同时 使 用 ， 也 可 单独 进行 设置 。 
图 像 的 高 度 和 宽度 的 属性 值 为 像素 。 

为 图 像 指定 “height” 和 “width” 属 性 是 一 个 好 习惯 ， 如 果 设 置 了 这 些 属性 ， 就 可 以 
在 页 面 加 载 时 为 图 像 预 留 空间 。 如 果 没 有 这 些 属性 ， 浏 览 器 就 无 法 了 解 图 像 的 尺寸 ， 也 就 
无 法 为 图 像 保留 合适 的 空间 , 这 样 就 导致 加 载 图 像 时 , 页 面 的 布局 会 发 生变 化 。 其 语法 如 下 : 

< img src=" 图 像 文件 所 在 的 路 径 ” height =" 图 像 的 高 度 "> 

< img src=" 图 像 文件 所 在 的 路 径 ” width =" 图 像 的 宽度 "> 

默认 情况 下 ， 单 独 设置 图 像 的 高 度 或 宽度 时 ， 图 像 将 进行 等 比例 缩放 。 而 同时 设置 高 
度 和 宽度 ， 且 比例 发 生变 化 时 ， 图 像 就 会 变形 。 
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实例 6-2: 在 网 页 中 插入 图 像 ， 并 设置 图 像 的 大 小 


<html> 

<head> 

<title> 设 置 图 像 大 小 </title> 

</head> 

<body> 

<h3 align="left ">iPhone 4 简介 </h3><br/> 

<center> 

<img src="iphone4.jpg" height="50"> 

<br /> 

<img src="iphone4.jpg" height="100"> 

<br /> 

<img src="iphone4.jpg" width="150" > 

</center> 

<p> gnbsp; gnbsp; &nbsp; gnbsp;iPhone 是 结合 照相 手机 、 个 人 数码 助理 、 媒 体 播放 器 及 无 线 
通信 设备 的 掌上 设备 ，iPhone 没有 键盘 ， 而 是 创新 地 引入 了 多 点 触摸 (Multi-touch) 触摸 

屏 界面 。2010 年 6 月 8 日 凌晨 1 点 ， 史 带 夫 。 乔 布 斯 在 美国 Moscone West 会 展 中 心 举行 的 
苹果 全 球 开发 者 大 会 “WWDC 10) 上 发 布 了 苹果 第 四 代 手 机 iPhone4，16G 版 签订 2 年 合约 
价 199 美元 , 32G 版 2 年 合约 价 299 美元 。 无 锁 版 零售 价 16G 版 499 美元 , 32G 版 599 美元 。 
2011 年 4 月 底 ， 白 色 iPhone4 开始 在 中 国内 陆 发 售 。2011 年 10 月 5 日 凌晨 ，iPhone 4S 
发 布 。 同 时 ，iPhone4 和 iPhone3GS 的 售 价 降低 。</p> 

</body> 

</html> 


运行 代码 后 效果 如 图 6-3 所 示 。 
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iPhone 4 简介 


机 个 人 数码 助 浊 ee 


这 有 键盘 ， Dy 
肾 中 心 举行 的 革 果 

299 美 元 > Ps 
《45 发 布 。 而 时 ，iPhonc4 和 加 
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图 6-3 设置 图 像 的 大 小 


从 图 6-3 中 可 以 看 出 , 在 设置 了 图 像 的 高 度 或 宽度 后 , 图 像 的 大 小 进行 了 等 比例 缩放 。 
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实例 6-3: 在 网 页 中 插入 图 像 ， 并 同时 设置 图 像 的 高 度 和 宽度 


<html> 

<head> 

<title> 同 时 设置 图 像 的 高 度 和 宽度 </title> 

</head> 

<body> 

<h3 align="left">iPhone 5 简介 </h3><br/> 

<center> 

<img src="iphone5.jpg" height="150" > 

<br /> 

<img src="iphone5.jpg" height="150" width="100" > 
</center> 

<p> gnbsp; gnbsp; gnbsp; gnbsp; 北 京 时 间 2012 年 9 月 13 日 凌晨 ， 


苹果 公司 在 美国 旧金山 


芳 草 地 艺术 中 心 举行 新 品 发 布 会 ， 正 式 发 布 其 新 一 代 产品 iPhone 5。 新 产品 屏幕 更 大 ， 同 时 
也 变 得 更 轻薄 。iPhone 5 采用 4 英寸 视网膜 屏 ， 屏 幕 分 辩 率 由 原来 的 960x640 升级 为 
1136x640， 同 时 主屏 幕 中 的 应 用 图 标 增加 至 5 排 。iPhone 5 将 预 装 最 新 的 ios 6 手机 操 
作 系 统 。iPhone 5 将 于 2012 年 9 月 21 日 上 市 ， 比 官方 发 售 提前 2 天 。 中 国 香港 成 为 首 批 


上 市 的 国家 和 地 区 。</p> 
</body> 
</html> 


运行 代码 后 效果 如 图 6-4 所 示 。 
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iPhone 5 简介 


图 6-4 同时 调整 图 像 的 高 度 和 宽度 


从 图 64 不 难看 出 , 同时 设置 了 图 像 的 高 度 和 宽度 , 且 图 像 比 例 改 变 后 , 图 像 有 些 变形 。 


四 虽然 可 以 通过 “height” 和 “width” 属 性 来 设置 图 像 大 小 ， 但 不 要 使 用 这 两 个 属 
性 来 缩放 图 像 。 如 果 通 过 “height” 和 “width” 属 性 来 缩小 图 像 ， 那 么 用 户 就 必 
须 下 载 大 容量 的 图 像 (即使 图 像 在 页 面 上 看 上 去 很 小 ) 。 正确 的 做 法 是 在 网 页 上 


使 用 图 像 之 前 ， 应 该 将 图 像 通过 软件 处 理 为 适当 的 尺寸 。 
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6.2.2 ”设置 图 像 的 边框 一 一 border 


网 页 中 添加 的 图 像 在 默认 情况 下 是 没有 边框 的 。 通过 <img> 标 签 的 “border” 属 性 可 以 
设置 图 像 边框 的 宽度 。 语 法 如 下 : 


< img src=" 图 像 文 件 所 在 的 路 径 " border =" 图 像 边框 宽度 "> 
实例 6-4: 在 网 页 中 插入 图 像 ， 并 设置 图 像 边 框 的 宽度 


<html> 

<head> 

<title> 设 置 图 像 边 框 的 宽度 </title> 

</head> 

<body> 

<h3 align="left" > 美丽 的 维多利亚 港 </h3><br/> 

<center> 

<img src="iphone5.jpg" height="150" > 

<img src="iphone5.jpg" height="150" border ="5"> 

</center> 

<p>&gnbsp; gnbsp; gnbsp; gnbsp; 维多利亚 港 是 位 于 香港 的 香港 岛 和 九龙 半岛 之 间 的 港口 和 海 
域 ， 是 中 国 的 第 一 大 海港 ， 世 界 第 三 大 ， 仅 次 于 美国 的 旧金山 和 巴西 的 里 约 热 内 卢 。 维 多 利 亚 
港 水 面 宽 阔 ， 景色 迷人 ， 海 港 的 西北 部 有 世界 最 大 的 集装箱 运输 中 心 之 一 的 「 著 涌 货 柜 码 头 」。 
每 天 日 出 日 落 ， 繁 忙 的 渡海 小 轮 穿梭 于 南北 两 岸 之 间 ， 渔 船 、 邮 轮 、 观 光 船 、 万 吨 巨轮 和 它们 
鸣 放 的 汽笛 声 ， 交 织 出 一 幅 美妙 的 海上 繁华 景致 。</P> 

</body> 

</html> 


运行 代码 后 效果 如 图 6-5 所 示 。 
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美丽 的 维多利亚 港 


图 6-5 设置 图 像 边框 的 宽度 
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6.2.3 ”设置 图 像 与 文本 的 对 齐 方 式 一 一 align 


在 网 页 设计 中 ， 文 本 和 图 像 的 有 机 结合 才能 使 得 界面 更 加 美观 ， 主 题 更 加 突出 ， 否 则 
会 显得 排版 比较 混乱 。 

图 像 与 文本 的 排列 方式 通过 “align” 属 性 来 设置 。 其 中 ， 图 像 在 文字 段落 中 位 置 的 对 
齐 方式 有 左 对 齐 (left) 、 右 对 齐 (right) 两 种 ， 图 像 在 单行 文本 中 的 对 齐 方式 有 顶部 对 齐 
Ctexttop) 、 中 部 对 齐 (middle) 和 底部 对 齐 (bottom) 三 种 ， 根 据 排版 的 实际 需要 设置 相 
应 的 属性 值 。 其 语法 如 下 : 


< img src=" 图 像 文件 所 在 的 路 径 ” align =" 图 像 与 文本 的 对 齐 方式 "> 
实例 6-5: 使 用 align 属性 来 设置 图 像 与 文本 的 对 齐 方 式 


<html> 

<head> 

<title> 设 置 图 像 与 文字 的 对 齐 方式 </title> 

</head> 

<body> 

<h3 align="left"> 县 花 </h3> 

<p><img src=" 县 伦 1.jpg" width=100 align="left">gnbsp; &nbsp; &nbsp; &nbsp; 县 


花 为 仙人 掌 科 县 花 属 附 生 植 物 。 灌 木 状 主 茎 圆 简 形 ， 木 质 。 分 枝 呈 扁平 叶 状 ， 多 具 2 棱 ， 少 具 3 
翅 ， 边 缘 具 波 状 圆 肯 。 刺 座 生 于 圆 齿 缺 刻 处 。 幼 枝 有 刺 毛 状 刺 ， 老 枝 无 刺 。 夏 秋季 晚间 开 大 型 白 
色 花 ， 花 漏斗 状 ， 有 芳香 。</p><br/><br/> 


<h4 align=left > 县 花 - 形 态 特 征 </h4> 


<p><img src=" 县 花 2.jpg" width=100 align="right">gnbsp; &nbsp; &nbsp; gnbsp; 
县 花 属 多 年 生 灌木 状 无 叶肉 质 性 植物 ， 高 可 达 五 公 尺 许 ， 老 茎 圆柱 形 棒状 ， 其 余 成 扁平 形 叶 状 ， 
节 间 甚 长 , 长 15 至 40 公分 , 宽 6 公分 边缘 波状 , 绿色 ; 老 茎 木质 化 ， 枝 分 歧 成 羽 状 , 全 株 平滑 ， 
无 毛 无 刺 。 每 年 五 至 十 一 月 开花 ， 花 条 单 生 于 叶 状 茎 上 的 凹凸 处 ， 有 花蕾 的 四 缺 处 不 抽 枝 ， 若 有 
抽 枝 则 不 生花 荤 。 花 在 夜间 绽放 ， 洁 白 高 牙 ， 幽 香 扑 鼻 。 花 简 基 部 带 褐色 ， 凋 萎 后 仍 悬 于 母 株 上 
达 数 天 之 久 。 葛 片 多 数 ， 细 线形 ， 花 泊 多 数 ， 长 是 形 。 雄 蕊 亦 多 数 ， 柱 头 多 和 裂 状 。</p> 


县 花 开放 
<img src=" 县 花 3.jpg" width=100 align="bottom"> 


<img src=" 县 花 3.jpg" width=100 align="middle"> 


<img src=" 县 花 3.jpg" width=100 align="texttop"> 


<br/> 
</body> 
</html> 


运行 代码 后 效果 如 图 6-6 所 示 。 
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设置 图 像 与 文字 的 对 齐 方式 - Windows Internet Explorer 


Sr 
文件 四 ”编辑 四 查看 中。 收藏 赤 内 工具 C) 帮助 o 
高 收 训 天 | 高 加 建议 网 。 局 获取 更 多 用 加 模块 ”图 
其 设置 图 像 与 文字 的 对 从 "有 国 - 马 雪 ” 耐 DD- 安全 @@- 


暴 花 


太太 内 尘 术 掀 : i 
木质 。 分 枝 呈 扁平 叶 状 ， 多 具 2 核 ， 少 具 3 亡 ， 边 缘 
到 下 刺 认 生 于 贺 齿 缺 刻 处 。 幼 枝 有 刺 毛 状 刺 |， 讼 

无 刺 。 夏 秋季 晚间 开 大 型 白色 花 ， 花 油 斗 状 ， 有 芳香 


县 花 -形态 特征 


15 至 40 公 分 ， 宽 6 公分 边缘 被 杖 ， 绿 色 ; 老 茎 木质 化 ， 枝 分 

些 成 羽 状 ， 全 株 平滑 ， 无 毛 无 刺 。 每 年 五 至 十 一 月 开花 ， 

花 休 单 生 于 叶 状 芭 上 的 四 凸 处 ， 有 花 屠 的 四 缺 处 不 抽 梳 ， 

车 有 抽 枝 则 不 生花 蔓 。 花 在 夜间 绽放 ， 洁 白 高 雅 ， 山 理 扑 锚 。 花 简 基 部 带 
神色 ， 凋 琴 后 仍 悬 于 母 株 上 达 数 天 之 久 。 募 片 多 数 ， 甸 线形 ， 花 泊 多 数 ， 
长 是 形 。 雁荡 亦 多 数 ， 柱 头 多 裂 状 。 


县 花 属 多 年 生 洪森 伏 无 叶 内 质 性 植物 ， 高 可 大 五 公 尺 “ 国 和 
许 ， 老 伴 贺 柱 形 棱 状 ， 其 余 成 户 平 形 叶 状 ， 节 间 其 长， 长 


图 6-6 使 用 不 同 对 齐 属性 后 的 效果 


6.2.4 ”设置 图 像 水 平和 垂直 间距 一 一 hspace、vspace 


在 前 面 几 个 实例 中 ， 图 像 与 文字 之 间 是 通过 <br> 或 <p> 标 签 进行 换行 的 ， 默 认 的 排版 
效果 是 两 者 之 间 的 距离 比较 紧凑 , 显得 较为 拥挤 。 在 HIML 中 可 以 通过 “hspace” 和 “vspace” 
属性 对 文字 与 图 像 的 水 平和 垂直 间距 进行 单独 设置 。“hspace” 和 “vspace” 的 属性 值 是 像 
素 。 其 语法 如 下 : 


< img src=" 图 像 文件 所 在 的 路 径 "” hspace =" 水 平 间距 "> 
< img src=" 图 像 文件 所 在 的 路 径 ” vspace =" 垂 直 间距 "> 


实例 6-6: 设置 图 像 水 平和 垂直 间距 


<html> 

<head> 

<title> 设 置 图 像 水 平和 垂直 间距 </title> 
</head> 

<body> 

<h3 align="left"> 各 国 建筑 </h3> 

<!-- 设 置 水 平和 垂直 间距 之 前 --> 

<img src=" 比 萨 斜 塔 .jpg" width=100 border ="2"> 

<img src=" 自 由 女神 .jpg" width=100 border ="2" > 

<img src=" 凯 旋 门 .jpg"” width=100 border ="2"> 

<h3 align="left" > 各 国 建筑 </h3> 

<!-- 设 置 水 平和 垂直 间距 之 后 --> 

<img src=" 比 萨 斜 塔 .jpg"” width=100 border ="2" hspace= "30" vspace ="50" > 
<img src=" 自 由 女神 .jpg" width=100 border ="2 


" hspace= "30" vspace ="50"> 
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<img src=" 凯 旋 门 .jpg" width=100 border ="2" hspace= "30" > 


<br/> 

</body> 

</html> 

运行 代码 后 效果 如 图 6-7 所 示 。 


设置 图 像 水 于 和 于 直 问 路 - Windows Intcrnct Explorer 
) 编 蛤 芭 ) 坦 看 00 收 车 天 加 工具 C) 大 把 0 
9 [Br wm WN ob | EE ]EB 


从 -四 -机 - 币 IE 中 -全 ID -| 


图 6-7 设置 图 像 水 平和 垂直 间距 


从 图 6-7 不 难看 出 ， 在 图 像 周围 留 出 额外 的 空间 ， 会 使 文本 更 容易 阅读 ， 而 且 整 体 页 
面 看 上 去 会 更 加 美观 和 协调 。 


63 设置 背景 


设置 网 页 背景 常用 到 的 是 对 颜色 和 图 片 的 设置 。 
6.3.1 背景 颜色 一 bgcolor 


颜色 是 人 们 无 论 何 时 都 能 感知 到 的 一 个 视觉 元 素 ， 网 页 界面 艺术 设计 离 不 开颜 色 的 拱 
配 与 应 用 ， 颜 色 的 设计 要 有 针对 性 ， 应 体现 出 自身 的 特色 。 如 政府 或 公司 官方 网 站 的 网 页 
风格 应 有 庄重 感 ， 以 冷色 调 为 宜 等 。 

在 HIML 中 <body> 标 签 的 背景 颜色 的 属性 是 “bgcolor”， 背 景 颜 色 属 性 将 背景 设置 
为 某 种 颜色 。 属 性 值 可 以 是 十 六 进 制 数 、RGB 值 或 颜色 名 。 其 语法 为 : 


<body bgcolor="#dd0000"> 
<body bgcolor="rgb(0,0,0)"> 
<body bgcolor="black"> 
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实例 6-7: 设置 图 像 背 景 颜 色 


<html> 

<head> 

<title> 设 置 图 像 背 景 颜色 </title> 

</head> 

<body bgcolor="#d0d0d0"> 

<h3 align="center"> 铁 路 部 门 加 强 客流 返程 高 峰 期 乘 降 和 售票 组 织 工作 </h3> 

<p>&nbsp; gnbsp; gnbsp; gnbsp; 黄金 周 假期 接近 尾声 ， 很 多 中 长 途 旅客 已 踏 上 归程 。 此 外 ， 由 
于 各 地 旅游 节庆 活动 仍 在 持续 进行 ， 短 途 客 游 持 续 火 热 。 中 长 途 客流 和 短途 客流 相合 加 ， 铁 路 
旅客 发 送 量 持续 高 位 运行 。</p> 

<p>&nbsp; gnbsp; gnbsp; gnbsp; 据 铁 道 部 假日 办 数据 显示 , 10 月 5 日 ,全 国 铁路 开行 客车 4329 
列 ， 其 中 加 开 临 客 324 列 ， 共 发 送 旅客 722.5 万 人 ， 同 比 增长 5.7s。 其 中 ， 北 京 铁路 局 发 送 
旅客 79. 6 万 人 ， 同 比 增长 6%; 上 海 铁路 局 发 送 旅客 131.4 万 人 ， 同 比 增长 13 .8%; 广州 铁 
路 《集团 ) 公司 发 送 旅客 92.7 万 人 ， 同 比 增长 11.5%。</p> 

</body> 

</html> 


运行 代码 后 效果 如 图 6-8 所 示 。 


设置 图 全 背景 颜色 - Yindowz Internet Explorer 
查看 忆 桨 天 工具 中 帮 且 人 0 
”| 逢 Dp \Hrmi 开 发 一 站 式 学 本 \ 第 六 音 \ 测 子 \exwvle 6 | | 好 | XX 
从 容 | 菩 设 是 四 聊 月 晤 玻 色 从 -加 - 山 - 忆 了 6 虽 -人 骆 划 - 


铁路 部 门 加 强 客流 返程 高 峰 期 乘 降 和 售票 组 织 工作 


黄金 周 假期 接近 尾声 ， 很 多 中 长 途 旅 客 已 踏 上 归程 。 此 外 ， 由 于 各 地 旅游 节庆 活动 仍 在 
区 短 途 客 游 持 续 火 热 。 中 长 途 客 谨 和 短途 客流 相合 加， 铁路 旅客 发 和 达 量 持续 高 位 运 


据 铁通 部 假日 办 数据 显示 ，10 月 5 日 ， 全 国 铁路 开行 客车 4329 列 ， 人 
不作 5 万 人 ， 同 比 增长 5. 7%。 其 中 ， 北 京 铁路 局 发 送 旅 容 79. 
1 4 万 人 ， 同 tt 着 长 15. 8%: 广州 铁路 Ei 区 


图 6-8 设置 背景 颜色 


| 一 个 网 页 中 背景 颜色 和 文字 颜色 搭配 得 不 好 的 话 ， 会 使 页 面 中 的 文字 难于 阅读 。 
用 户 可 以 尝试 改动 一 下 代码 ， 设 置 背 景色 为 “#ffffff” ， 文 字 颜 色 为 “green”， 
运行 一 下 看 看 效果 如 何 。 


6.3.2 ”背景 图 像 一 一 background 


背景 中 的 另 一 个 重要 元 素 就 是 图 像 。 图 像 被 喻 为 “世界 语 ”， 就 是 因为 它 能 普遍 为 人 
们 所 看 履 ， 并 不 同 程 度 地 了 解 其 中 的 含义 ， 所 以 ， 合 理 的 运用 图 像 可 以 形象 地 表现 设计 主 
题 。 在 很 多 的 网 页 中 都 采用 了 大 量 的 图 形 图 像 ， 需 要 特别 注意 的 是 背景 图 和 主 图 的 作用 。 
背景 图 是 衬托 主题 ， 增 加 网 页 的 层次 感 ， 使 网 页 不 再 枯燥 ， 但 不 能 喧 宾 夺 主 。 主 图 是 整个 
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网 页 的 视觉 中 心 ， 它 具有 直观 性 强 的 特点 ， 不 需要 像 文字 那样 去 逐 句 阅读 ， 能 给 人 强烈 的 
视觉 信息 。 

在 HTML 中 <body> 标 签 的 背景 图 像 的 属性 是 “background”， 它 的 属性 值 为 图 像 的 
URL， 也 就 是 图 像 文 件 所 在 的 路 径 。 如 果 背 景 的 图 像 尺 寸 小 于 浏览 器 窗口 ， 那 么 图 像 将 在 
整个 浏览 器 窗口 进行 复制 平 铺 排列 。 其 语法 为 : 


<body background=" 图 像 文件 所 在 的 路 径 "> 
实例 6-8: 设置 背景 图 像 


<html> 

<head> 

<title> 设 置 图 像 背景 </title> 

</head> 

<body background=" 中 秋 .jpg"> 

<font face=" 黑 体 "> 

<hl align="left"> 中 秋 佳 节 </h1></font> 
<font face=" 黑 体 "size="6"> 
<p>&gnbsp; gnbsp; gnbsp; gnbsp; 中秋 节 ， 又 称 为 团圆 节 。<br/> 为 每 年 农历 八 月 十 五 。</p> 
</font> 

</body> 

</html> 


代码 运行 后 效果 如 图 6-9 所 示 。 


Sy Drm 一 x ! 
四 ”如 可 名 ”查看 W 收 率直 抽 工 具 Q) 志 驯 人 0 


襄 回 记 以 RSI ， 和 了 更 多 并 加 想 块 ”图 吉 但 
由 诅 背景 图 个 忽 "- 国 -局 怖 ”由 ， 安 主 G) > 


图 6-9 设置 背景 图 像 


背景 图 像 设 置 要 注意 以 下 三 点 : 

(1) 图 像 文件 不 应 过 大 ， 否 则 将 增加 页 面 的 加 载 时 间 ， 一 般 儿 十 K 为 宜 。 
(2) 背景 图 像 与 页 面 中 的 内 容 图 像 搭配 要 得 当 ， 如 之 前 所 说 ， 不 能 喧 宾 夺 主 。 
(3) 背景 图 像 与 页 面 中 的 文字 颜色 搭配 要 得 当 ， 要 使 得 文字 阅读 起 来 不 费力 气 。 
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64 难点 解析 


本 章 的 难点 是 图 像 的 路 径 设 置 。 设 置 不 正确 的 话 ， 会 出 现 图 片 不 能 正常 显示 的 情况 。 
在 网 站 的 应 用 中 ， 通 常 使 用 "/" 来 表示 根 目录 ， 如 “/img/photo.jpg” 就 表示 “photo.jpg” 文 
件 在 这 个 网 站 的 根 目 录 上 的 “img” 目 录 里 。 但 是 这 样 使 用 对 于 初学 者 来 说 是 具有 风险 性 
的 ， 因 为 要 知道 这 里 所 指 的 根 目 录 并 不 是 用 户 的 网 站 的 根 目录 ， 而 是 用 户 的 网 站 所 在 的 服 
务 器 的 根 目 录 ， 因 此 ， 当 网 站 的 根 目 录 与 服务 器 根 目 录 不 同时 ， 就 会 发 生 错 误 。 所 以 ， 应 
该 使 用 与 自己 相对 的 目标 位 置 ， 也 就 是 相对 路 径 。 在 上 例 中 的 “photo.jpg” 可 以 使 用 
“img/photo.jpg” 来 定位 文件 ， 那 么 不 论 将 这 些 文件 放 到 哪里 ， 只 要 它们 的 相对 关系 没有 
变 ， 就 不 会 出 错 。 

为 了 避免 在 制作 网 页 时 出 现 路 径 错 误 ， 用 户 可 以 使 用 “Dreamweaver” 软 件 的 站 点 管 
理 功 能 来 管理 站 点 。 通 过 使 用 菜单 命令 “site-new site” 新 建站 点 并 定义 站 点 目录 之 后 ， 它 
将 自动 把 绝对 路 径 转化 为 相对 路 径 ， 并 且 当 用 户 在 站 点 中 移动 文件 时 ， 与 这 些 文件 关联 的 
连接 路 径 都 会 自动 更 改 ， 这 样 会 非常 方便 。 


6.5 ”高 手 训练 营 


1. 图 像 常用 的 格式 有 哪些 ? 

2， 绝 对 路 径 和 相对 路 径 的 区 别 ? 

3， 制作 一 个 以 介绍 中 国 农历 新 年 为 主要 内 容 的 网 页 ， 并 设置 网 页 的 背景 为 庆 新 年 之 
类 的 图 像 。 制 作 时 要 注意 背景 图 像 与 页 面 中 的 文字 颜色 搭配 是 否 得 当 。 

4. 灵活 使 用 图 像 的 大 小 和 对 齐 属性 来 制作 网 页 ， 完 成 后 效果 如 图 6-10 所 示 。 


绽 人 这 用 用 全 村 党 的 名 入 丘 性 inows Inter 
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图 6-10 效果 图 
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超 链接 (Hyperlink) 指 的 是 网 页 中 指向 一 个 目标 的 连接 关系 ， 这 个 目标 可 以 是 网 页 、 
图 片 、 邮 件 地 址 、 文 件 、 应 用 程序 等 。 超 链接 是 网 站 中 使 用 比较 多 的 HTML 元 素 ， 因 为 网 
站 中 各 级 页 面 之 间 的 跳 转 都 是 由 超 链接 连接 而 成 的 。 超 链接 也 是 浏览 者 和 服务 器 交互 的 主 
要 手段 ， 下 面 将 逐步 深入 学 习 。 

本 章 要 点 : 

超 链 接 属 性 一 一 herf 
超 链 接 属 性 一 一 target 
如 何 设置 锚 点 链接 
添加 影像 地 图 


已 


所 下 总 


7.1 超 链 接 基础 


一 个 网 站 是 由 多 个 页 面 组 成 的 ， 页 面 之 间 依靠 链接 确定 相互 的 导航 关系 ， 各 个 网 页 链 
接 在 一 起 后 ， 才 能 真正 构成 一 个 网 站 。 网 站 中 的 每 一 个 网 页 在 互联 网 上 都 有 独一无二 的 地 
址 CURL) 。 超 链接 的 具体 分 类 有 以 下 几 种 方式 。 

(1) 按 照 链接 路 径 分 类 : 网 页 中 超 链接 一 般 分 内 部 链接 (相对 URL)、 锚 点 链接 (anchor 
连接 ) 和 外 部 链接 (绝对 URL) 。 

(2) 按照 使 用 对 象 分 类 : 网 页 中 的 超 链 接 又 可 以 分 为 文本 超 链 接 、 图 像 超 链接 、E-mail 
链接 、 销 点 链接 、 多 媒体 文件 链接 和 空 链 接 等 。 

(3) 按照 网 页 链接 效果 分 类 : 网 页 中 的 超 链接 还 可 以 分 为 动态 超 链接 和 静态 超 链接 。 
动态 超 链接 指 的 是 可 以 通过 改变 HIML 代码 来 实现 动态 变化 的 超 链接 。 例 如 ， 用 户 将 鼠标 
移动 到 某 个 文字 的 链接 上 时 ， 文 字 就 会 改变 颜色 或 呈现 一 些 动画 等 效果 。 而 静态 超 链接 ， 
顾名思义 ， 就 是 没有 动态 效果 的 超 链接 。 


7.2 ”建立 超 链 接 


网 站 中 每 一 个 对 象 都 有 自己 的 存放 地 址 和 路 径 ， 建 立 超 链 接 首 先是 要 理解 两 个 对 象 之 
间 相 互 链接 的 路 径 关 系 。 所 以 当 创 建新 的 网 页 时 ， 一 定 要 明确 对 象 之 间 的 路 径 关 系 。 
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7.2.1” 超 链接 标签 一 一 <a> 


HTML 中 超 链接 标签 是 用 <a> 来 定义 的 ，“a” 是 英文 “anchor”〔 锚 点 ) 的 简写 。 它 
的 作用 是 把 当前 位 置 的 文本 或 图 片 等 对 象 连接 到 其 他 页 面 、 文 本 或 图 像 上 。 语 法 如 下 : 


<a> 超 链接 文件 </a> 


当 创建 网 页 时 ， 不 可 能 也 不 需要 为 每 一 个 链接 都 输入 完全 的 地 址 。 用 户 只 需要 确定 当 
前 页 面 同 站 点 根 目录 之 间 的 相对 路 径 关系 即 可 。 首 先 要 先 理解 两 个 概念 : 内 部 链接 和 外 部 
链接 。 


1. 内 部 链接 


内 部 链接 指 的 是 在 同一 个 网 站 内 部 ， 不 同 页 面 之 间 的 链接 关系 ， 也 可 以 称 之 为 站 内 链 
接 。 在 建立 网 站 内 部 链接 时 ， 使 用 相对 路 径 ， 首 先 要 构建 清晰 的 导航 结构 ， 使 用 户 方便 找 
到 所 需 的 HTML 文件 内 容 ， 如 频道 、 栏 目 之 间 的 链接 , 或 者 站 内 关键 词 之 间 的 链接 都 可 以 
归 类 为 内 部 链接 。 内 部 链接 的 优点 是 网 站 文件 夹 所 在 的 服务 器 地 址 发 生 改变 时 ， 文 件 夹 的 
所 有 内 部 链接 都 不 会 出 问题 。 内 部 链接 的 使 用 方法 如 下 。 

(1) 链接 至 同一 目录 下 的 文件 : 只 需 输 入 要 链接 的 文件 名 称 。 

(2) 链接 到 下 一 级 目录 中 的 文件 ， 先 输入 目录 名 ， 然 后 加 " /" 再 输入 文件 名 。 

(3) 链接 到 上 一 级 目录 中 的 文件 ， 先 输入 "..…./"， 再 输入 目录 名 和 文件 名 。 

2. 外 部 链接 

它 和 内 部 链接 相反 ， 简 而 言 之 ， 如 果 链 接 是 指向 站 点 文件 夹 之 外 的 ， 就 被 称 作 外 部 链 
接 。 在 添加 外 部 链接 时 ， 使 用 绝对 路 径 ， 使 用 方法 就 是 直接 输入 路 径 地 址 ， 如 


http:Wwww.baidu.com。 
7.2.2” 超 链接 属性 一 一 herf 


在 添加 超 链 接 时 ， 链 接 路 径 的 属性 设置 非常 重要 ， 这 关系 到 页 面 中 的 各 个 元 素 是 否 能 
正常 显示 。 在 网 页 中 文字 和 图 片 的 超 链 接 可 能 是 最 常见 的 ， 当 鼠标 指针 移动 到 网 页 中 的 某 
个 链接 上 时 ， 箭 头 会 变 成 小 手 形状 。 其 语法 为 : 


<a href=" 超 链接 路 径 "> 设 置 链 接 的 文字 或 图 片 等 元 素 </a > 
实例 7-1: 给 网 页 文字 添加 超 链 接 


<html> 

<head> 

<title> 文 字 超 链接 </title> 

</head> 

<body> 

<h3 align="center"> 黄 山 风 景区 简介 </h3><br/> 
<p> 
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<img src=" 迎 客 松 .jpg"” width=150 align="left" alt=" 迎 客 松 ">gnbsp;&nbsp; 
&nbsp; gnbsp; 黄山 雄 路 风景 秀丽 的 安徽 南部 ， 是 我 国 最 著名 的 山岳 风景 区 之 一 。 黄 山 集 名 山 
之 长 : 泰山 之 雄伟 ， 华 山 之 险峻 ， 衡 山 之 烟云 ， 庐 山 之 飞 瀑 ， 脸 荡 山 之 巧 石 ， 峨 眉山 之 清凉 。 
明代 旅 . . .<a href=" 全 文 内 容 .html"> [阅读 全 文 ]</a> 


<p> 
</body> 
</html> 


运行 代码 后 ， 可 以 看 到 该 网 页 中 包含 一 个 文本 链接 “阅读 全 文 ” ， 效 果 如 图 7-1 所 示 。 


文字 起 链接 - Windows Internet Explorer 
文件 四” 久 才 四、 查看 中 收 豪 天 工具 中 帮助 0 

日 - Brust |X 

宽 安 | 辣 文 了 相近 一 - 回 -四 I 虽 -会 IRO- 


黄山 风景 区 简介 


黄山 雁 路 风景 秀丽 的 安 微 南部， 是 我 国 最 著名 的 山岳 风 
景区 之 一 。 黄 山 集 名 山 之 长 ， 秦 山 之 碎 伟 ， 华 山 之 险 焕 ， 衡 
山 之 烟云 ， 庐 山 之 飞 瀑 ， 挫 荡 山 之 巧 石 ， 峨 眉山 之 清凉 。 明 
民 旅 , .. [阅读 全 文 ] 


图 7-1 文字 添加 了 超 链接 的 效果 


鼠标 单 击 文字 “阅读 全 文 ”， 页 面 将 转 到 全 文 内 容 的 网 页 ， 如 图 7-2 所 示 。 


任 Windows Internet Explorer 
文件 四 蝙 得 下 ) 查看 QW) 收藏 天 从 ) 工具 中 帮助 00) 
区- 硬 n: Worm 开发 一 站 式 学 习 \ 弟 七 章 \H 了 全 | XX 


帘 安 大 文 了 06 按 从 -上 目 - 友 -已 ID- 全 IO- 


黄山 风景 区 简介 


i er a 是 我 国 最 著名 的 山岳 风 
。 黄 山 全 名 山 之 长 ， 泰山 之 礁 伟 ， 华 山 之 险 几 ， 和 
sy 庐山 之 习 唱 ， 脸 蕊 山 之 巧 石 ， 峨 慎 山 之 清凉 . 


和 、 地 理学 家 ， 徐 茂 客 两 游 黄山 ， 赞 到 说 给 者 册 
ju ， 观 止 关 ! ”又 留 “五岳 归 来 不 看 山 ， 黄 山 归 来 不 
”的 的 关于 更 有 “天 下 第 一 奇 山 “之 称 。 可 以 说 无 峰 不 
五 ， 无 石 不 松 ， Ee 并 以 奇 松 、 怪 石 、 云 海 、 温 泉 黄山 四 绝 车 称 于 世 。 
其 二 湖 ， 三 瀑 , 十 六 泉 ， 二 十 四 溪 相 映 争 炮 。 春 、 夏 、 秋 、 专 四 季 景 色 各 异 。 黄山 
还 养 有 “天 然 动 物 园 和 天 下 植物 园 ”的 美称 ， 有 植物 近 1500 种 ， 动 物 500 允 种。 


黄山 四 绝 


订 松 、 怪 石 、 云 海 、 温泉 


图 7-2 超 链接 的 页 面 


实例 7-2: 给 网 页 图 片 添加 超 链接 


<html> 

<head> 

<title> 图 片 超 链接 </title> 
</head> 
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<body> 

<h3 align="left"> 云 海 </h3><br/> 

<p> 

<a href="example 7-2 副本 .html"> 

<img src=" 云 海 .jpg” width=200 align="left" alt=" 云 海 "></a> 

&nbsp; &nbsp; gnbsp; gnbsp; 黄山 云海 自古 黄山 云 成 海 , 黄山 是 云雾 之 乡 , 以 峰 为 体 ,以 云 为 衣 ， 
其 瑰丽 壮观 的 “云海 ”以 美 、 胜 、 奇 、 约 享誉 古今 ， 一 年 四 季 皆 可 观 、 尤 以 冬季 景 最 佳 。 依 云 
海 分 布 方位 ， 全 山 有 东海 、 南 海 、 西 海 、 北 海 和 天 海 ， 而 登 莲 花 峰 、 天 都 峰 、 光 明 顶 则 可 尽 收 
诸 海 于 眼底 ， 领 略 “ 海 到 尽头 天 是 岸 ， 山 登 绝 顶 我 为 峰 ” 之 境地 。<br/> 

&nbsp; &nbsp; gnbsp; gnbsp; 大 凡 高 山 ， 可 以 见 到 云海 ， 但 是 黄山 的 云海 更 有 其 特色 ， 奇峰 怪 石 
和 古松 隐现 云海 之 中 ， 就 更 增加 了 美感 。 黄 山 一 年 之 中 有 云雾 的 天 气 达 200 多 天 ， 水 气 升腾 或 
十 后 雾气 未 消 ， 就 会 形成 云海 ， 波 澜 壮 阔 ， 一 望 无 边 ， 黄 山大 小 山峰 、 千 沟 万 密 都 淹没 在 云 涛 
雪 浪 里 ， 天 都 峰 、 光 明 顶 也 就 成 了 浩瀚 云海 中 的 孤岛 。 阳 光照 炎 ， 云 更 白 ， 松 更 好 ， 石 更 奇 。 
流 云 散落 在 诸 峰 之 间 ， 云 来 盘 去 ， 变 化 莫 测 。 风 平 浪 静 时 ， 云 海 一 铺 万 硕 ， 波 平 如 镜 ， 映 出 山 
影 如 画 ， 远 处 天 高 海 阔 ， 峰 头 似 扁舟 轻 摇 ， 近 处 仿佛 触手 可 及 ， 不 禁 想 掏 起 一 捧 云 来 感受 它 的 
温柔 质感 。 名 而， 风起云涌， 波涛 滚滚 ， 奔 涌 如 潮 ， 浩 浩荡 荡 ， 更 有 飞 流 直 泻 ， 白 浪 排 空 ， 惊 
涛 拍 岸 ， 似 千 军 万 马 席卷 群 峰 。 待 到 微风 轻 拂 ， 四 方 云 慢 ， 涓 涓 细 流 ， 从 群 峰之 间 穿 阶 而 过 ; 
云海 渐 散 ， 清 淡 处 ， 一 线 阳光 酒 金 绘 彩 ， 浓 重 处 ， 升 腾 跌宕 稍 纵 即 逝 。 云 海 日 出 ， 日 落 云海 ， 
万 道 霞 光 ， 绚 丽 缤纷 。<br/> 

&nbsp; gnbsp; gnbsp; gnbsp; 红 树 铺 云 ， 成 片 的 红叶 浮 在 云海 之 上 ， 这 是 黄山 深秋 罕见 的 奇 景 。 
北海 双 剪 峰 ， 当 云海 经 过 时 为 两 侧 的 山峰 约束 ， 从 两 峰之 间 流 出 ， 向 下 倾泻 ， 如 大 河 奔腾 ， 又 
似 和 白色 的 壶 口 瀑布 ， 轻 柔 与 静 谱 之 中 可 以 感受 到 暗流 涌 动 和 奔流 不 息 的 力量 ， 是 黄山 的 又 一 奇 
时 ,<br/> 

&nbsp; &nbsp; &nbsp; gnbsp; 玉屏 楼 观 南 海 ， 清 凉 台 望 北 海 ， 排 云 享 看 西海 ， 白 鹅 岭 赏 东海 ， 敖 
鱼 峰 晃 天 海 。 由 于 山谷 地 形 的 原因 ， 有 时 西海 云 遮 筋 单 ， 白 息 岭 上 却 青 烟 飘 渺 ， 道 道 金光 染 出 
层 层 彩 叶 ， 北 海 竟 晴 空 万 里 ， 人 们 为 云海 美景 而 上 下 奔波 ， 谓 之 “ 赶 海 ”。 

<P> 

</body> 

</html> 


运行 代码 后 ， 可 以 看 到 该 网 页 中 包含 一 个 图 片 链接 ， 效 果 如 图 7-3 所 示 。 


世 刍 经 贱 天 诲 。 由 于 山 从 地形 
1 北海 竟 东 代 万里， 人 


图 7-3 图 片 添加 了 超 链 接 的 效果 
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图 7-4 链接 至 大 图 网 页 


7.2.3 ” 超 链 接 属性 一 一 target 


默认 情况 下 ， 超 链接 打开 新 页 面 的 方式 是 在 当前 窗口 中 打开 。 当 然 用 户 也 可 以 根据 浏 
览 者 的 实际 需要 ， 指 定 其 他 打开 新 窗口 的 方式 。“target” 属 性 可 以 用 来 定义 目标 窗口 的 打 
开 方 式 。“target” 属 性 的 属性 值 如 表 7-1 所 示 : 


表 7-1 target 属性 值 


属性 值 作 用 
_parent 在 上 一 级 窗口 中 打开 ， 这 使 得 页 面 载 入 父 窗口 
__blank 浏览 器 在 一 个 新 的 窗口 中 打开 页 面 
__self 在 同一 个 窗口 中 打开 ， 这 项 一 般 是 默认 的 
_top 在 浏览 器 的 整个 窗口 中 打开 ， 忽 略 任何 框架 结构 


在 实际 页 面 链接 操作 中 要 牢记 以 上 属性 值 ， 切 勿 混淆 。 它 的 语法 为 


<a href=" 超 链接 路 径 ” target=" 页 面 的 打开 方式 "> 设置 链接 的 文字 或 图 片 等 元 素 </a> 


加 框架 结构 是 网 页 常用 到 的 一 种 页 面 结构 ， 在 后 面 的 章节 进行 详细 讲解 。 


<html> 

<head> 

<title> 链 接 的 目标 窗口 </title> 
</head> 

<body> 
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<hl align="left"> 淘 宝 网 简介 </h1> 

<p>&nbsp; gnbsp; gnbsp; gnbsp; 淘 宝 网 是 亚太 最 大 的 网 络 零 售 商 圈 ， 致 力 打 造 全 球 领先 网 络 零 
售 商 圈 ， 

<a href="http://china.alibaba.com" target=" self"> 阿 里 巴巴 集团 </a> 

在 2003 年 5 月 10 日 投资 创立 。 

<a href="http://www.taobao.com"” target=" blank"> 淘 宝 网 </a> 

现在 业务 跨越 c2C (个 人 对 个 人 ) 、B2C〔 商 家 对 个 人 》 两 大 部 分 。 截 止 2008 年 12 月 31 日 , 淘 
宝 网 注册 会 员 超 9800 万 人 ， 覆盖 了 中 国 绝 大 部 分 网 购 人 群 ，2008 年 交易 额 为 999.6 亿 元 ， 占 
中 国 网 购 市 场 80% 的 份额 。2007 年 , 淘宝 的 交易 额 实现 了 433 亿 元 , 比 2006 年 增长 156%。2008 
年 上 半年 ， 淘 宝 成 交 额 就 已 达到 413 亿 元 。2011 年 7 月 3 日 ， 淘 宝 遭 遇 “ 内 部 整改 ”风波 ， 引 
起 各 方 关注 。2011 年 10 月 16 日 ， 反 淘宝 联盟 对 外 宣布 将 暂停 对 淘宝 商城 的 攻击 活动 。 

</p> 

</body> 

</html> 


运行 代码 后 效果 如 图 7-5 所 示 。 


广 接 的 日 标 铺 口 - WWndows Intcrnct Exp 
文件 四” 驴 模 下 可 看 人 收 本 天 内 工具 四 帮助 0 
[ EE 


突 闪 | 需 证 0 有 村 盘 - 回 种 -了 mo- 羡 IRO- 


淘宝 网 简介 


和 歌 基 站 让 和 
2003 年 5 月 10 百 立 . 


由 困 里 
在 业务 跨越 C2C ever 
人 
国 网 购 市 场 30% 的 
007 年 I ee 人 
交 生 法 名 过 双生 22 元。 ， 徇 宝 遵 遇 “内 部 整改 “风流 ，5 起 各 
方 关注 ，2011 年 10 月 15 日 ， 良 海宝 可 嚼 对 外 家 市 将 千 停 对 酒 宇 商城 的 攻击 活动。 


图 7-5 添加 文字 超 链接 的 网 页 
同样 是 文字 超 链 接 到 所 对 应 的 网 站 ， 不 同 的 是 对 文字 “阿里 巴巴 集团 ”定义 了 在 原 窗 
口 打 开 链 接 页 面 ， 效 果 如 图 7-6 所 示 ; 而 对 文字 “淘宝 网 ”定义 了 在 新 的 窗口 打开 链接 页 
面 ， 效 果 如 图 7-7 所 示 。 


ED 二 恩 - FEmD， xs。IRo 克 -“ 
Er Aa Dt- ee WE- Funti Sh Rdsmh- 


图 7-6 在 原 窗口 打开 链接 页 面 
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淘宝 网 简介 包 邮 1 6 折 秒 亲 ! [1] 
痢 宝 网 是 亚太 景 大 的 网 络 季 售 商 展 ， 到 全 
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图 7-7 在 新 窗口 打 开 恨 接 页 而 


其 他 的 页 面 链接 效果 用 户 可 以 尝试 一 下 ， 找 到 最 适合 自己 的 链接 方式 。 
7.2.4 ”链接 到 E-mail 


电子 邮件 在 人 们 的 生活 、 工 作 、 学 习 过 程 中 越 来 越 普及 。 在 浏览 网 站 时 ， 经 常会 看 到 


“联系 我 们 ”的 文字 链接 ， 通 过 点 击 这 个 链接 ， 就 会 触发 你 的 邮件 客户 端 ， 比 如 Outlook 


Express， 然 后 显示 一 个 新 建 的 电子 邮件 窗口 ， 通 过 E-mail 就 可 以 实现 互相 交流 的 目的 。 设 
置 E-mail 超 链接 的 语法 如 下 : 
<a href="mailto: 电 子 邮 件 地 址 "> 文字 链接 </a> 
电子 邮件 有 几 种 常见 的 属性 ， 如 表 7-2 所 示 : 
表 7-2 电子 邮件 常见 属性 
属 性 作 用 
subject <ahre 人 "mailto: 电 子 邮件 地 址 ? subject 电 子 邮件 主题 "> 文字 链接 </a> 显示 主题 文字 
bod <a hre 仁 "mailto: 电 子 邮 件 地 址 ? body = 电子 邮件 内 容 "> 文字 链接 </a> 显示 主体 内 容 
Le <a hre 人 "mailto: 电 子 邮件 地 址 ?cc= 电 子 邮件 地 址 "> 文字 链接 </a> 抄 送 收 件 人 
bcc <a hre 人 "mailto: 电 子 邮 件 地 址 ?bcc= 电 子 邮 件 地 址 "> 文字 链接 </a> 暗 送 收 件 人 


当 电 子 邮件 需要 同时 设置 多 个 属性 时 ， 属 性 之 间 用 “&” 连 接 。 
实例 7-4: 添加 E-mail 超 链接 ， 并 设置 相关 属性 


<html> 
<head> 


<title> 链 接 到 E-mail</title> 
</head> 


<body> 
<p> 


如 果 大 家 有 疑问 可 以 发 送 E-mail 联系 我 们 ， 以 下 是 邮件 链接 : 


<a href="mailto:someone@163.com?cc=someone@163.com &bcc= 暗 送 收 件 人 asohu . 
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com&subject= 我 有 些 疑 问 "> 发 送 邮件 ! </a> 
</p> 
</body> 
</html> 


运行 代码 后 ， 单 击 文字 “发 送 邮 件 ”， 会 打开 新 的 邮件 窗口 。 在 邮件 的 地 址 栏 中 会 自 
动 添加 设置 好 的 邮箱 地 址 及 相关 属性 ， 效 果 如 图 7-8 所 示 。 


[CSICE 


和 一 谷 - 加 - 确 : 可 7 虽 -合共 WU- 


如 果 大 家 有 疑问 可 以 发 送 E-mail 联 系 我 们 ， 以 下 是 邮件 链接 ， 发 送 邮 件 1 


全 我 有 些 锋 问 辐 回 外 
文件 四 ” 编 旬 EE) 查看 WD 白 和 0) 格式 0) 工具 D) ” 虱 


加 9 
Fd 


加 守 件 抄 送 。 阿 送 收 件 人 gsehu em 
主题: [ED 


图 7-8 发 送 E-mail 


7.2.5 下 载 文件 


在 浏览 网 页 时 经 常会 使 用 到 下 载 文件 。 制 作 下 载 文件 的 超 链 接 ， 只 需 在 链接 地 址 中 输 
入 文件 所 在 的 路 径 即 可 ， 这 个 路 径 既 可 以 是 相对 路 径 ， 也 可 以 是 绝对 路 径 。 当 用 户 在 浏览 
器 中 单 击 链接 后 , 浏览 器 会 自动 判断 文件 的 类 型 ， 以 做 出 相关 的 下 载 情况 处 理 。 其 语法 为 : 


<a href=" 下 载 文件 所 在 的 路 径 "> 文字 链接 </a > 
实例 7-5: 给 网 页 添加 下 载 文件 的 超 链接 


<html> 

<head> 

<title> 下 载 文件 </title> 

</head> 

<body> 

<a href=" 暴 风 影音 .exe" target=" blank"> 点 击 此 处 下 载 文件 </a> 
</body> 

</html> 


运行 代码 后 ， 单 击 链接 文字 ， 弹 出 下 载 对 话 框 ， 效 果 如 图 7-9 所 示 。 
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下 载 文件 - Windows_ Intornet Explorer 


[ea 画 
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图 7-9 添加 下 载 文件 超 链接 


7.2.6 ” 空 链 接 和 其 他 链接 


空 链接 也 是 一 种 常用 的 链接 。 所 谓 空 链接 ， 是 指 鼠 标 指向 链接 后 , 虽然 形状 变 成 小 手 ， 
但 单 击 链接 后 ， 仍 然 停 留 在 当前 页 面 。 其 语法 如 下 : 


<a href="#"> 文 字 链 接 </a> 
实例 7-6: 在 网 页 中 添加 一 个 空 链接 


<html> 

<head> 

<title> 空 链接 </title> 

</head> 

<body> 

<a href="#"” > 这 是 一 个 空 连接 ， 点 击 我 仍 将 停留 在 这 个 页 面 </a> 
</body> 

</html> 


代码 运行 后 ， 单 击 超 链 接 文 字 并 没有 链接 到 其 他 页 面 ， 效 果 如 图 7-10 所 示 。 


立 件 全 编辑 企 )】 查看 YW 收藏 夹 人 
OO- Bem ma EE 


-ms 


ET 


图 7-10 添加 空 链接 
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制作 网 站 时 ， 除 了 空 链接 外 还 经 常 遇 到 以 下 几 种 超 链接 。 

1. ftp 链接 

fp 即 “ 文 件 传输 协议 ”。 协 议 是 使 计算 机 与 计算 机 之 间 能 够 相互 通讯 的 语言 。fp 使 
文件 和 文件 夹 能 够 在 mtemet 上 公开 传输 。 通常 网 上 会 有 匿名 的 公开 的 ftp 服务 器 ， 通 过 文 
件 传输 协议 ， 用 户 就 可 以 足 不 出 户 地 获得 各 种 免费 软件 和 需要 的 文件 〈《 有 时 可 能 需要 从 网 
络 管理 员 处 获得 权限 才能 登陆 并 访问 计算 机 上 的 文件 ) 。 其 语法 如 下 : 


<a href="ftp:// 地 址 "> 文字 链接 </a> 


2. telnet 链接 
telnet 是 指 一 台 计 算 机 远程 连接 到 另 一 台 计 算 机 上 ， 并 在 远程 计算 机 上 运行 自己 的 程 
序 ， 从 而 共享 计算 机 网 络 资源 。 这 也 是 网 上 最 主要 和 最 广泛 的 应 用 之 一 。 其 语法 如 下 : 


<a href="telnet:// 地 址 "> 文字 链接 </a> 


7.3 锚 点 


用 户 在 浏览 内 容 比 较 多 的 网 页 时 ， 需 要 不 断 拖 动 浏览 器 的 滚动 条 才能 找到 相关 的 内 
容 ， 这 样 很 不 方便 。HTML 中 锚 点 链接 的 功能 可 以 解决 这 个 问题 。 实 际 上 锚 (anchor) 就 
是 用 于 在 同一 页 面 内 不 同位 置 之 间 的 跳 转 ， 这 是 一 种 常用 到 的 网 站 技术 。 


7.3.1 添加 锚 点 一 name 


就 像 一 本 书 的 目录 对 应 着 相应 的 章节 一 样 , 在 HIML 中 添加 命名 锚 点 ， 通 过 单 击 命名 
锚 点 ， 不 仅 能 跳 转 到 相对 应 的 文字 ， 还 能 指向 页 面 里 的 特定 段落 ， 也 能 当 作 “精准 链接 ” 
的 工具 ， 便 于 浏览 者 查看 网 页 内 容 。“name” 属 性 是 用 来 创建 HTML 内 部 的 目录 。 在 实 
际 使 用 中 可 以 不 设置 链接 文字 ， 因 为 锚 点 仅仅 是 为 了 链接 提供 一 个 位 置 ， 不 会 以 任何 特殊 
方式 显示 ， 它 对 浏览 者 是 不 可 见 的 。 其 语法 为 : 


<a name=" 锚 点 名 称 "> 锚 点 的 链接 文字 </a> 


锚 点 经 常用 在 大 型 文档 开始 的 位 置 上 命名 。 现 在 很 多 大 型 的 网 站 都 采用 这 样 的 导航 
方式 。 如 果 浏 览 器 找 不 到 已 定义 的 锚 点 ， 那 么 就 会 返回 至 文档 的 顶端 ， 避 免 有 链接 错误 
的 发 生 。 

实例 7-7: 在 网 页 中 添加 锚 点 


<html> 
<head> 
<title> 添 加 锚 点 </title> 
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</head> 

<body> 

<a name="top"></a><hl align="left"> 澳 门 旅游 简介 </h1> 

<p> 

&nbsp; &nbsp; gnbsp; gnbsp; 澳 门 具有 400 多 年 历史 , 东西 文化 一 直 在 此 地 相互 交融 , 使 澳门 成 
为 一 个 独特 的 城市 ， 既 有 古色 古 香 的 传统 庙宇 ， 又 有 庄严 肃穆 的 天 主 圣 堂 ， 还 有 众多 的 历史 文 
化 遗产 ， 以 及 沿岸 优美 的 海滨 胜景 。 比 较 有 名 的 包括 大 三 巴 牌 坊 、 妈 阁 庙 、 谭 公 庙 、 圣 老 楞 佐 
堂 、 普 济 禅院 等 。</p> 

<P> 

<a name="a">1、 大 三 巴 牌坊 </a><br>gnbsp; gnbsp; gnbsp; gnbsp; 大 三 巴 牌 坊 位 于 澳门 大 
巴 街 附 近 的 小 山 丘 上 ， 是 圣保罗 教堂 的 前 壁 遗 迹 ， 因 教堂 前 壁 遗 迹 貌 若 中 国 传统 的 牌坊 ， 所 以 
称 大 三 巴 牌坊 。 从 牌坊 顶部 逐 层 而 下 ， 先 是 一 个 高 高 在 上 的 十 字 架 ， 向 下 再 分 三 层 ， 每 层 的 壁 
合 均 藏 有 一 铜 像 。 游 览 大 三 巴 牌坊 ， 除 欣赏 狗 峨 壮观 的 前 壁 之 外 ， 还 要 琢磨 壁 上 精致 的 浮雕 及 
其 意义 。 现 在 ， 大 三 巴 牌坊 已 经 成 为 澳门 的 象征 之 一 ， 也 是 游客 澳门 之 行 的 必 到 之 地 。</P> 

<P> 

<a_name="b">2、 妈 阁 庙 </a><br>gnbsp;snbsp;&nbsp;sgnbsp; 妈 阁 庙 位 于 澳门 南端 妈 阁 山 
西 获 ， 是 澳门 最 古老 的 寺庙 ， 建 成 于 500 多 年 前 的 明 朝 。 传 说 宋朝 时 福建 莆田 有 一 孝 女 林 默 娘 
能 预言 吉凶 ， 在 一 次 海难 中 捐躯 ， 羽 化 升 仙 ， 后 常 显灵 海上 ， 在 惊涛骇浪 中 帮助 商人 和 渔民 消 
灾 解 难 ， 使 人 们 化 险 为 夷 ,渔民 因 感 其 恩德 ， 尊 为 海神 、 天 后 ， 并 立 庙 奉祀 。 妈 阅 庙 是 一 座 具 
有 中 国民 族 特色 的 古老 建筑 ， 几 百年 间 文人 雅士 们 留 下 的 无 数 题词 石刻 ， 更 为 这 座 古 庙 平 添 了 
几 分 雅 趣 。</p> 

<p> 

<a name="c">3、 谭 公 庙 </a><br>gnbsp; gnbsp; gnbsp; gnbsp; 谭 公 庙 位 于 路 环 十 月 初 五 街 
尾 ， 与 中 国 大 陆 小 横 琴 岛 极 接近 ， 该 庙 建 于 清 同 治 年 间 ， 距 今 已 有 百年 ， 是 路 环 香 火 最 盛 的 庙 
宇 ， 庙 内 除 供奉 谭 仙 圣 外 ， 更 加 置 有 一 只 由 鲸 骨 雕 制 成 的 龙舟 ， 是 一 件 已 有 百年 多 历史 的 文物 。 
</p> 

<p> 

<a name="d">4、 圣 老 楞 优 堂 </a><br>gnbsp;&gnbsp;&nbsp;&gnbsp; 圣 老 楞 优 堂 位 于 风 顺 堂 
街 ， 建 立 于 1560 年 ， 期 间 曾 几 度 重修 ， 教 堂 门 前 有 左右 两 排 石 梯级 直达 大 门 前 ， 左 右 钟楼 并 
峙 ， 一 座 是 时 钟 用 来 报时 用 ， 一 座 是 铜 钟 ， 供 教堂 做 弥撒 时 摇动 震 鸣 用 。 教 堂 的 屋顶 是 中 国 式 
的 金字 瓦 面 ， 圣 堂 内 桂 有 古 式 吊 灯 ， 古 雅 锡 趣 。</p> 

<P> 

<aname="e">5、 普 济 禅院 </a><br>sgnbsp;&gnbsp;&gnbsp;&nbsp; 普 济 禅院 又 称 观 音 堂 ,是 澳 
门 三 大 禅院 之 一 ， 建 于 明 朝 末 年 ， 距 今 约 360 多 年 。 大 雄 宝 殿内 供奉 三 尊 三 宝 佛像 ， 皆 为 丈 八 
金 身 ， 其 中 之 一 为 佛祖 释 迦 件 尼 。 主 殿 供 奉 观音 ， 观 音 大 士 雕 像 的 莲台 由 樟 木 膨 塑 ， 十 八 罗 汉 
分 列 主 典 两 旁 ， 雕 工 精细 ， 造 型 神龙 活 现 。</P> 

</body> 

</html> 


从 代码 中 不 难看 出 ， 我 们 分 别 在 标题 “澳门 旅游 简介 ”处 添加 了 锚 点 “top”， 在 其 他 
5 个 景点 标题 处 添加 了 从 “a” 到 “e”5 个 锚 点 。 运 行 代码 后 ， 效 果 如 图 7-11 所 示 。 

从 图 7-11 可 以 看 出 ,网 页 中 添加 了 锚 点 后 ,页 面 并 没有 发 生 特殊 的 变化 。 接 下 来 为 锚 
点 添加 相对 应 的 链接 。 
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光 门 有 有 0 向 交 ,天 作证 主 上 二 直下 于， 为 一 个 站 待 的 法 市, 琉 有 十 名 古 竺 的 从 
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0 年 的 台 莉 。 休 倪 趟 神 时 福建 东 加 
市 天 对 商 人 和 程 儿 有 
守 具 有 中 国民 红 特 名 
的 古老 稚 搞 几 百年 间 文人 芷 十 们 禄 


和 
和 Tar jE 5 瑞 按 近 ， 年 本 
Eoin ee 


4 王者 信 宇 
人 
有 训导 半 时 一 应 是 叶 御用 未 执 吕 用 ,一 太 是 多 训 , 供 教 全 从 各 帮教 空 的 医 页 是 中 国 式 的 全 字 加 


图 7-11 在 网 页 中 添加 锚 点 


7.3.2” 锚 点 链接 一 一 # 


设置 锚 点 后 ， 通 过 添加 相应 的 链接 ， 来 实现 页 面 内 的 跳 转 ， 这 需要 使 用 “# ”标记 。 
锚 点 链接 有 两 种 情况 : 


1， 锚 点 和 其 链接 的 内 容 在 同一 个 页 面 
其 语法 为 : 

<a href="# 锚 点 名 称 "> 锚 点 的 链接 文字 </a> 
实例 7-8: 将 实例 7-7 中 的 锚 点 添加 链接 


<html> 

<head> 

<title> 添 加 锚 点 链接 </title> 

</head> 

<body> 

<a name="top"><hl align="left"> 澳 门 旅游 简介 </h1> 

<p> 

</a>gnbsp; gnbsp; gnbsp; gnbsp; 澳门 具 有 400 多 年 历史 ， 东 西 文化 一 直 在 此 地 相互 交融 ， 使 
澳门 成 为 一 个 独特 的 城市 , 既 有 古色 古 香 的 传统 庙宇 , 又 有 庄严 肃穆 的 天 主 圣 堂 , 还 有 众多 的 历 
史 文化 遗产 ， 以 及 沿岸 优美 的 海滨 胜景 。 比 较 有 名 的 包括 <a href="#a"> 大 三 巴 牌 坊 </a>、 
<a href="#b"> 妈 阁 庙 </a>、<a href="#c"> 谭 公 庙 </a>、<a href="#d"> 圣 老 楞 佐 堂 
</a>、<a href="#e"> 普 济 禅院 </a> 等 。</p> 

<p> 

<a name="a">1、 大 三 巴 牌 坊 </a> <a href="#top"> 到 顶部 </a><br> 

&nbsp; &nbsp; gnbsp; gnbsp; 大 三 巴 牌 坊 位 于 澳门 大 巴 街 附近 的 小 山 丘 上 ， 是 圣保罗 教堂 的 前 壁 
遗迹 ， 因 教堂 前 壁 遗 迹 貌 若 中 国 传统 的 牌坊 ， 所 以 称 大 三 巴 牌 坊 。 从 牌坊 顶部 逐 层 而 下 ， 先 是 

一 个 高 高 在 上 的 十 字 架 ， 向 下 再 分 三 层 ， 每 层 的 壁 侈 均 藏 有 一 铜 像 。 游 览 大 三 巴 牌 坊 ， 除 欣赏 

凋 峨 壮观 的 前 壁 之 外 ， 还 要 琢磨 壁 上 精致 的 浮雕 及 其 意义 。 现 在 ， 大 三 巴 牌 坊 已 经 成 为 澳门 的 
象征 之 一 ， 也 是 游客 澳门 之 行 的 必 到 之 地 。</p> 
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<p> 

<a name="b">2、 妈 阅 庙 </a> <a href="#top"> 到 顶部 </a><br> 

&nbsp; &nbsp; gnbsp; gnbsp; 妈 阁 庙 位 于 澳门 南端 妈 阁 山西 远 ， 是 澳门 最 古老 的 寺庙 ， 建 成 于 
500 多 年 前 的 明 朝 。 传 说 宋朝 时 福建 莆田 有 一 孝 女 林 默 娘 能 预言 吉凶 ， 在 一 次 海难 中 捐躯 ， 羽 
化 升 仙 ， 后 常 显灵 海上 ， 在 惊涛骇浪 中 帮助 商人 和 渔民 消 灾 解 难 ， 使 人 们 化 险 为 砍 ， 渔 民 因 感 
其 恩德 ， 尊 为 海神 、 天 后 ， 并 立 庙 奉祀 。 妈 阁 庙 是 一 座 具 有 中 国民 族 特色 的 古老 建筑 ， 几 百年 
间 文 人 雅士 们 留 下 的 无 数 题词 石刻 ， 更 为 这 座 古 庙 平添 了 几 分 雅 趣 。</p> 

<P> 

<a name="c">3、 谭 公 庙 </a> <a href="#top"> 到 顶部 </a><br> 

&nbsp; &nbsp; gnbsp; gnbsp; 谭 公 庙 位 于 路 环 十 月 初 五 街 尾 ， 与 中 国 大 陆 小 横 琴 岛 极 接近 。 该 庙 
建 于 清 同 治 年 间 ， 距 今 已 有 百年 ， 是 路 环 香火 最 盛 的 庙宇 ， 庙 内 除 供奉 谭 仙 圣 外 ， 更 加 置 有 一 
只 由 鲸 骨 雕 制 成 的 龙舟 ， 是 一 件 已 有 百年 多 历史 的 文物 。</p> 

<P> 

<a name="d">4、 圣 老 楞 佐 堂 </a> <a href="#top"> 到 顶部 </a><br> 

&nbsp;&nbsp;&nbsp;&nbsp; 圣 老 楞 佐 堂 位 于 风 顺 堂 街 ， 建 立 于 1560 年 ， 期 间 曾 几 度 重修 ， 教 
党 门 前 有 左右 两 排 石 梯级 直达 大 门 前 ， 左 右 钟 楼 并 上 峙 ， 一 座 是 时 钟 用 来 报时 用 ， 一 座 是 铜 钟 ， 
供 教堂 做 弥 撤 时 摇动 震 鸣 用 。 教 堂 的 屋顶 是 中 国 式 的 金字 瓦 面 ， 圣 堂 内 桂 有 古 式 吊 灯 ， 古 雅 逸 
趣 。</p> 

<p> 

<a name="e">5、 普 济 禅院 </a> <a href="#top"> 到 顶部 </a><br> 

&nbsp; &nbsp; gnbsp; gnbsp; 普 济 禅院 又 称 观音 堂 ， 是 澳门 三 大 禅院 之 一 ， 建 于 明 朝 末年 ， 距 今 
约 360 多 年 。 大 雄 宝典 内 供奉 三 尊 三 宝 佛像 ， 皆 为 克 八 金 身 ， 其 中 之 一 为 佛祖 释 迦 件 尼 。 主 殿 
供 礁 观音 ， 观 音 大 士 雕 像 的 莲台 由 樟 木 雕 塑 ， 十 八 罗 汉 分 列 主 殿 两 旁 ， 雕 工 精细 ， 造 型 神龙 活 
现 。</p> 

</body> 

</html> 


在 上 述 代码 中 分 别 添加 了 从 “a” 到 “e” 的 5 个 锚 点 链接 ， 同 时 在 5 个 景点 的 错 点 标 
题 后 都 添加 了 “到 项 部 ”的 锚 点 文字 链接 ， 运 行 代码 后 ， 效 果 如 图 7-12 所 示 。 


Pg a pT Et ee 
人 革 寺 产 , 队 及 入 举 优 于 的 毒 供用 兵 。 比较 有 名 的 包括 二 三 严 竹 鞠 、 权 司 


00 多 年 传 襄 林地 时 冤 建 首 本 有 一 字 
ee 
入 天 直 生 一 灾 具有 中 国民 放 竺 色 的 古老 寺 六 , 几 生 年 局 文 


LE 
a ed 的 六 先 。 


ee ,居间 尊 几 度 得 修 , 教 全 门 前 有 车 右 天 绊 石 棕 织 过 大 门 前 ,左右 针 惨 并 
局 我 全 做 于 王 时 入 动 天 思 月 。 教 堂屋 柄 全 中 国 式 的 金字 所 面 圣 佐 由 性 有 有 


图 7-12 添加 了 锚 点 链接 的 效果 


当 单 击 某 一 个 锚 点 文字 链接 时 ， 页 面 将 跳 转 至 该 锚 点 所 链接 的 标题 且 标 题 位 置 在 该 页 
面 中 置 项。 例如 ， 单 击 文字 “ 妈 阁 庙 ” 后 ， 页 面 跳 转 至 该 标题 的 内 容 并 将 该 标题 的 位 置 显 


。7T2 。 
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示 到 页 面 的 顶端， 效果 如 图 7-13 所 示 。 


这 加 辆 狂笑 -madaws Intorne 
CT TT] 
B rie Nn mre/ | | FT TREE EE 
ER | 全 总 -对 -+ 生 TRW- ”| 


受 且 电大 性 幸 
蕉 特色 的 古老 灶 让 ， ee 更 


为 六 这 二 启 理 大 了 几 


+ 史 

六 该 庙 建 于 消 同 治 年 问 , 算 信 已 
ee 
件 已 有 生年 多 历 天 的 文物 。 


4 

其 忆 可 人 从 位 了 及 顺 台 衔 ， y I 
人 时 乌 针 . 供 牧 党 做 区 所 引 托 动 天 吗 用 。 埃 全 
的 屋 贡 是 中 区 式 沟 爹 闻 上面， i 
5、 普 太宰 院 到 硕 部 
th es tt 


事 三 草 三 主 便 算 , 首 为 文人 全 身 ,其中 之 一 交付 福生 包 征 尼 。 主 咎 供 笠 观 各 士 账 短 的 壬 训 
由 术 林 脂 训 十 八 罗汉 介 列 二 网 撩 因 解 本 村 滞 放 开 访 力 法 丽 、 


图 7-13 锚 点 链接 跳 转 效 果 


当 锚 点 位 置 靠 下 且 页 面 已 经 到 达 底部 时 ， 该 锚 点 链接 的 内 容 将 不 会 置顶， 整个 页 面 保 
持 浏览 器 右 侧 的 滚动 条 在 最 底部 时 的 状态 。 例 如 ， 单 击 文字 “ 圣 老 楞 佐 堂 ”后 ， 页 面 已 经 
到 达 最 底部 ， 所 以 该 标题 并 不 会 像 图 7-13 中 的 标题 “ 妈 阅 庙 ” 一 样 显示 到 页 面 的 顶端 ， 效 
果 如 图 7-14 所 示 。 


Ty 


时 福建 背 思 有 一 李 女 林 惑 扫 能 玲 中 掉 和 R， 有 在 尺 涛 骇 
浪 中 者 助 商 人 和 注 民 衫 灾 解 淮 , 全 人 们 从 这 办 芝 , 渔 民 因 加 上 思 1 天 后 , 并立 庙 龙 
i。 妇 | 中 国民 旅 符 名 | 几 百年 问 文人 生生 富生 好 要 
为 这 诛 古 让 平添 了 几 分 中 起 


3 谭 公 庙 

次 近 ， 该 压 建 于 请 同 治 年 则 , 距 今 己 
有 百年 ,是 咯 环 否 ) 虱 有 一 只 由 凉 骨 岁 审 成 的 龙舟 , 是 一 
件 已 有 到 年 多 历史 的 文物 。 


村 ms i 

年 ,期 间 普 几 度 重 聊 , 教 替 门 肝 有 左右 丙 排 石 桩 级 直 达 
大 [ 曾 和 一 应 于 条 亚 是 请 御 , 供 教 党 售 蓉 揪 时 措 动 案 双 用 。 教堂 
的 屋顶 是 中 国 式 约 宇 字 瓦 面 a 古 畦 泡 授 。 


所 

国生 Rs 人 , 建 于 明 朝 打 年 , 距 今 约 360 志 年。 大 妈 宝 由 内 供 
替 三 站 三 信件 佛 ， 其 中 之 一 为 全 诅 笠 迎 皇 尼 。 主 作 供 幸 观音, 观音 大 士 膝 萝 的 连 台 
由 樟 木 隐 还 ， 3 EE 第 工 精 组 , 迁 到 神 夺 活 必 - 


图 7-14 锚 点 链接 到 达 底 部 效果 


当 单 击 标题 后 面 的 “到 项 部 ”的 文字 链接 时 ， 页 面 将 返回 
所 链接 的 位 置 ， 如 图 7-15 所 示 。 


至 顶端 ， 也 就 是 锚 点 “top 


ET TE TE 
GO- Be rm 


站 安息 志 tm5 寻 委 总 " 目 营 - 晤 RD ， 合 TRW)， ”| 
澳门 旅游 简介 
凌 门 具有 400 允 年 历史 ， 于 人 汪 t 习 全 使 澳门 成 为 一 个 独特 的 城市 , 妩 有 古 


名 十 香 的 读 流 启 字 , 义 有 主 产 下 穆 的 天 主 圣 多 的 历 均 文化 过 产 , 以 及 哲 岸 人 美的 海 沪 
胜景、 比较 有 名 的 包括 太 三 已 诅 坊 计 Es 迁 公 向 、 兰 老 模 竹 驹 、 若 济 神 这 等 


项 亲近 的 小 山上 , 是 圣保罗 教 堂 的 前 晤 刘 迹 ， CE 
三 巴 悍 坊 。 从 秋 层 而 下, 先是 一 个 高 高 在 上 的 十 字 架 , 同 

和 评 苇 , 阵 和 革 关 二 贡 的 前 苦 之 外 ,还 半天 

;为 澳门 的 介 征 之 一 , 也 是 游 套 过 门 之 行 的 


图 7-15 页 面 返回 : 项 并 效果 
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HTML/CSS 网 页 设计 与 开发 一 站 式 学 习 一 一 难点 /案例 /练习 


2.， 锚 点 链接 到 其 他 页 面 

其 语法 为 : 

<a href=" 页 面 路 径 # 锚 点 名 称 "> 锚 点 的 链接 文字 </a> 

实例 7-9: 将 实例 7-8 的 代码 修改 ， 新 建 用 于 链接 锚 点 的 页 面 


<html> 

<head> 

<title> 新 建 锚 点 链接 页 面 </title> 

</head> 

<body> 

<hl align="left"> 澳 门 旅游 简介 </h1> 

<p> 

</a>g&nbsp; gnbsp; &nbsp; &nbsp; 澳 门 具有 400 多 年 历史 ， 东 西 文 化 一 直 在 此 地 相互 交融 ， 使 
澳门 成 为 一 个 独特 的 城市 ， 既 有 古色 古 香 的 传统 庙宇 ， 又 有 庄严 肃穆 的 天 主 圣 堂 ， 还 有 众多 的 历 
史 文 化 遗产 ， 以 及 沿岸 优美 的 海滨 胜景 。 比 较 有 名 的 包括 <a href="example 7-10.html#a" 
target=" blank"> 大 三 巴 牌坊 </a> 、<a href="example 7-10.html#b" target= 
"blank"> 妈 阅 庙 </a>、<a href=" example 7-10.html#c"” target=" blank"> 谭 
公 庙 </a>、<a href=" example 7-10.html#d"” target=" blank"> 圣 老 楞 佐 堂 </a>、 
<a href=" example 7-10.html#e" target=" blank"> 普 济 禅院 </a> 等 。 </p> 


</body> 
</html> 
运行 代码 后 效果 如 图 7-16 所 示 。 
新 建 错 点 链接 页 面 -~ Windows Internet Explorer 
文件 四。 编辑) 查看 中 收 茂 赤 和 ) 工具 GD 帮助 0D 
GO- 感 0 mm 开发 一 站 式 学 习 \ 第 -可 | 好 | | XX yD 
安息 2 包 点 妊 报 页 面 从 "有 目 - 往 " 避 弄 中- 
澳门 旅游 简介 
澳门 具有 400 多 年 历史 ， 化， 吉 在 比 失 相 帮 交 下 使 澳门 成 为 一 
独特 的 城市 , 既 有 上 古色古香 的 传统 庙宇, 又 人 
的 历史 文化 遗产 , 以 及 沿岸 优美 的 海 尝 胜景。 比较 有 名 的 包括 太 三 巴 牌坊 、 
妈 疾 庙 、 谭 公 庙 、 圣 老 桶 佐 堂 、 普 济 禅 院 等 。 
图 7-16 新 建 锚 点 链接 页 面 
接 下 来 我 们 设置 锚 点 链接 的 页 
实例 7-10: 新 建 一 个 网 页 pg example_7-10.html， 用 它 作为 设置 锚 点 链接 的 页 面 
<html> 
<head> 
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<title> 添 加 锚 点 链接 </title> 

</head> 

<body> 

<hl align="left"> 澳 门 旅游 简介 </h1> 

<p> 

<a name="a">1、 大 三 巴 牌坊 </a> <br> 

&nbsp; &nbsp; gnbsp; &nbsp; 大 三 巴 牌 坊 位 于 澳门 大 巴 街 附近 的 小 山 丘 上 ， 是 圣保罗 教堂 的 前 壁 
遗迹 ， 因 教堂 前 壁 遗 迹 貌 若 中 国 传统 的 牌坊 ， 所 以 称 大 三 巴 牌坊 。 从 牌坊 顶部 逐 层 而 下 ， 先 是 
一 个 高 高 在 上 的 十 字 架 ， 向 下 再 分 三 层 ， 每 层 的 壁 合 均 藏 有 一 铜 像 。 游 览 大 三 巴 牌 坊 ， 除 欣赏 
并 峨 壮观 的 前 壁 之 外 ， 还 要 琢磨 壁 上 精致 的 浮雕 及 其 意义 。 现 在 ， 大 三 巴 牌 坊 已 经 成 为 澳门 的 
象征 之 一 ， 也 是 游客 澳门 之 行 的 必 到 之 地 。</p> 

<p> 

<a name="b">2、 妈 阅 庙 </a> <br> 

&nbsp; &nbsp; gnbsp; gnbsp; 妈 阅 庙 位 于 澳门 南端 妈 阁 山西 远 ， 是 澳门 最 古老 的 寺庙 ， 建 成 于 
500 多 年 前 的 明 朝 。 传 说 宋朝 时 福建 莆田 有 一 孝 女 林 默 娘 能 预言 吉凶 ， 在 一 次 海难 中 捐躯 ， 羽 
化 升 仙 ， 后 常 显灵 海上 ， 在 惊涛骇浪 中 帮助 商人 和 渔民 消 灾 解 难 ， 使 人 们 化 险 为 夷 ， 渔 民 因 感 
其 恩德 ， 尊 为 海神 、 天 后 ， 并 立 庙 奉祀 。 妈 阁 庙 是 一 座 具有 中 国民 族 特 色 的 古老 建筑 ， 几 百年 
间 文人 雅士 们 留 下 的 无 数 题词 石刻 ， 更 为 这 座 古 庙 平添 了 儿 分 雅 趣 。</p> 

<p> 

<a name="c">3、 谭 公 庙 </a> <br> 

&nbsp; gnbsp; gnbsp; &nbsp; 谭 公 庙 位 于 路 环 十 月 初 五 街 尾 ， 与 中 国 大 陆 小 横 琴 岛 极 接近 。 该 庙 
建 于 清 同治 年 间 ， 距 今 已 有 百年 ， 是 路 环 香火 最 盛 的 庙宇 ， 庙 内 除 供奉 谭 仙 圣 外 ， 更 加 置 有 一 
只 由 鲸 骨 雕 制 成 的 龙舟 ， 是 一 件 已 有 百年 多 历史 的 文物 。</p> 


<P> 

<a name="d">4、 圣 老 楞 佐 堂 </a> <br> 

&nbsp; &nbsp; &nbsp;&nbsp; 圣 老 楞 佐 堂 位 于 风 顺 堂 街 ， 建 立 于 1560 年 ， 期 间 曾 几 度 重修 ， 教 
堂 门 前 有 左右 两 排 石 梯级 直达 大 门 前 ， 左 右 钟楼 并 峙 ， 一 座 是 时 钟 用 来 报时 用 ， 一 座 是 铜 钟 ， 
供 教 堂 做 弥撒 时 摇动 震 鸣 用 。 教 堂 的 屋顶 是 中 国 式 的 金字 瓦 面 ， 圣 堂 内 桂 有 上 古 式 吊灯 ， 上 古雅 锡 
趣 。</p> 

<p> 

<a name="e">5、 普 济 禅院 </a> <br> 

&nbsp; gnbsp; gnbsp; gnbsp; 普 济 禅院 又 称 观音 堂 ， 是 澳门 三 大 禅院 之 一 ， 建 于 明 朝 末年 ， 距 今 
约 360 多 年 。 大 雄 宝 殿内 供奉 三 尊 三 宝 佛像 ， 皆 为 丈 八 金 身 ， 其 中 之 一 为 佛祖 释 迦 件 尼 。 主 殿 
供奉 观音 ， 观 音 大 士 雕 像 的 莲台 由 樟 木 雕塑 ， 十 八 罗 汉 分 列 主 殿 两 旁 ， 雕 工 精细 ， 造 型 神龙 活 
现 。</p> 

</body> 

</html> 


运行 代码 后 ， 打 开 实例 7-9 设 管 的 页 面 ， 当 单 击 文字 “ 妈 阁 庙 ”， 会 在 新 窗口 中 打开 锚 
点 链接 的 页 面 ， 并 将 标题 文字 “ 妈 阁 庙 ” 置 于 页 面 的 顶端 ， 效 果 如 图 7-17 所 示 。 
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于 建 铺 吉 链接 页 面 = 要 ndows Internet 


| 牙 -vmm 和 发 -站 式 学 二 \ 第 七 总 \ 例 了 \ex 国 || 兮 ||X [三 二 下, 方 式 知 芋 


澳门 旅游 简介 
澳门 具有 400 多 年 历史 , 东西 文化 一 直 在 此 地 相互 交融 , 使 澳门 成 为 一 个 独特 的 城 


市 , 既 有 古色古香 的 传统 庙 字 , 又 有 庄严 击 称 的 天 主 圣 堂 , 还 让 众多 的 历史 文化 遗产 , 以 
人 比较 有 名 的 包括 大 三 巴 牌 坊 、 妈 阁 直 、 谭 公 庙 、 圣 老 材 仁 


为 海神 、 立 庙 奉 祀 。 妈 间 庙 是 一 座 具有 中 国民 ， 的 吉 老 建 并 几 百年 同文 
入 入 扩 二 诗 平 添 了 几 分 雅 趣 。 


3、 谭 公 庙 

谭 公 庙 位 于 路 环 十 月 初 五 街 尾 , 与 中 国 大 陆 小 横 琴 岛 极 接近 。 该 庙 建 于 清 同 治 年 
间 , 距 今 已 有 百年 ,是 路 环 香火 yy 请 让 攻 外 。 更 加 置 有 一 只 由 鲜 骨 
膨 制 成 的 龙骨 , 是 一 件 已 有 百年 多 历史 的 文 


4 于 才情 估 业 。 2 
图 7 17 销 点 链接 到 其 他 页 面 的 效果 


74 影像 地 图 


i 区 域 都 可 以 链接 到 不 同 网 页 
的 资源 ， ws ee 这 就 是 影像 地 图 。 


7.4.1 命名 影像 地 图 


要 完成 影像 地 图 的 超 链接 首先 要 命名 影像 地 图 ， 这 需要 用 到 图 像 标签 <img> 中 的 属性 
“usemap”。 其 语法 为 : 


<img src=" 图 像 文件 名 "usemap="# 图 像 的 名 称 "> 


7.4.2 ”定义 影像 地 图 一 一 <map> 


<map> 标 签 用 来 定义 影像 地 图 的 作用 区 域 ， 它 是 双 标签 ， 通 过 “name” 属 性 为 图 像 命 
名 ， 且 “name” 的 属性 值 必须 与 “usemap” 的 属性 值 相 同 ， 也 就 是 说 ，“ 影 像 地 图 名 称 ” 
要 一 致 。 其 语法 为 : 


<map name=" 图 像 的 名 称 "> 


7.4.3 ”设置 区 域 超 链 接 一 一 <area> 
定义 好 图 像 后 ， 接 下 来 为 图 像 设置 区 域 超 链 接 。 图 像 区 域 超 链接 的 标签 为 <area>， 
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<area> 标 签 永远 嵌 套 在 <map> 标 签 内 部 。 其 语法 为 ; 


<map name=" 图 像 的 名 称 "> <area 区 域 属 性 =" 区 域 属性 值 ">> </map> 
<area> 标 签 常 用 到 以 下 两 个 属性 : 

1. “shape” 属 性 

“shape” 属 性 用 来 定义 热点 区 域 的 形状 。 根 据 不同 的 需要 来 设置 相应 的 属性 值 ， 如 表 


7-3 所 示 。 
表 7-3 ”Shape 属性 值 
属性 值 定义 的 区 域 形状 
Tect 矩形 
cirle 圆 形 
ol 多 边 形 


用 网 


2. “cords” 属 性 


“cords” 属 性 用 来 定义 区 域 点 的 坐标 。 关 于 坐标 的 设置 较为 复杂 且 不 易 控 制 ， 建 议 使 
页 设计 软件 (如 Dreamweaver) 进行 设置 。 
实例 7-11: 添加 一 个 图 片 ， 并 设置 其 为 影像 地 图 


<html> 

<head> 

<title> 添 加 影像 地 图 </title> 

</head> 

<body> 

<h3 align="left"> 客 厅 装 修 效 果 图 </h3> 

<br/> 

<img src=" 客 厅 装 修 效果 图 .jpg”alt=" 影 像 地 图 " width="640" height="410" 
hspace="10" border="0" align="center" 
usemap="#map"><br><br><br><br><br> 

<font color="#660000" size=5><a name="2floor">1 .欢迎 来 到 二 楼 来 看 装修 效果 
</a></font><br><br><br><br><br><br><br> 

<font color="#660000" size=5><a name="tv">2. 这 是 电视 墙 效果 
</a></font><br><br><br><br><br><br><br> 

<font color=" #660000" size=5><a name="desk">3. 这 是 太 师 椅 </a></font><br> 

</body> 

</html> 


运行 代码 效果 如 图 7-18 所 示 。 
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图 7-18 添加 并 命名 影像 地 图 


接 下 来 启动 Dreamweaver 软件 ， 打 开 例 7-11 所 设置 的 页 面 ， 如 图 7-19 所 示 。 


也 御 全 入 卫 全 相 看 名。 若 入 ( 优 如 人 兰 下 人 0 后 争 加 其 尊敬 大 口 叫 。 辞 各 0 | 坷 增 ” 世 硬 大 马 


| ET 
A 去 /有 国 


客厅 装 侈 效 米 图 


CEIITCZTETOESCTTTTIEEG 
EP 


[ET 
WN] DO 5 | QD WAY mu 


图 7-19 使 用 Dreamweaver 打开 网 页 


在 左下 角 属 性 面板 设置 中 ， 用 不 同 的 形状 工具 分 别 在 图 中 二 楼 、 电 视 墙 和 太 师 椅 区 域 
绘制 相应 的 形状 ， 效 果 如 图 7-20 所 示 。 


图 7-20 绘制 区 域 形状 
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单 击 选择 二 楼 区 域 的 形状 ,在 属性 面板 下 方 的 “链接 ”文本 框 中 添加 链接 地 址 “#2floor”， 
效果 如 图 7-21 所 示 。 使 用 同样 的 方法 分 别 为 电视 墙 区 域 和 太 师 椅 区 域 的 形状 添加 链接 地 址 
“#tv” 和 “#desk”。 


nl ed 一 加 Bd ee | 


EE WN 
er on 加 


MW en e 
MD 


图 7-21 为 区 域 形状 添加 链接 地 址 


保存 文件 后 ， 在 浏览 器 中 运行 该 网 页 。 当 鼠标 移 至 含有 超 链接 的 区 域 时 ， 会 变 成 小 手 
状 ， 单 击 这 个 区 域 ， 页 面 将 跳 转 至 该 区 域 所 链接 的 文字 位 置 ， 如 图 7-22 所 示 。 


1, 欢迎 来 到 二 楼 来 看 装修 效果 


2, 这 是 电视 墙 效果 


图 7-22 ” 跳 转 至 区 域 链接 地 址 效果 
在 源 代码 中 ， 实 例 7-11 中 <img> 标 签 中 的 代码 也 发 生 了 改变 ， 改 动 的 代码 如 下 : 


<img src=" 客 厅 装 修 效果 图 .jpg”alt=" 影 像 地 图 " width="640" height="410" 
hspace="10" border="0" align="center" usemap="#map"> 
<map name="map"> 
<area shape="rect" coords="267,15,467,122" href="#2floor"> 
<area shape="rect" coords="277,194,416,284" href="#tv"> 
<area shape="circle" coords="149,315,48" href="#desk"> 


</map> 
以 上 就 是 设置 影像 地 图 的 方法 ， 用 户 在 实际 网 页 制作 中 可 以 更 加 精确 地 设置 区 域 及 相 
关 的 链接 。 
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7.5 难点 解析 


本 章 难点 是 网 页 内 部 或 网 页 之 间 的 超 链接 ， 本 节 介绍 网 站 内 部 链接 设置 的 一 些 基 本 
技巧 。 

1. 网 站 的 导航 

首先 最 应 该 说 的 就 是 “ 回 项 部 ”。 很 多 用 户 在 看 完 页 面 时 ， 往 往 还 要 用 鼠标 拖 到 最 上 
面 ， 这 时 候 网 页 中 嵌入 “ 回 顶 部 ”就 是 一 个 很 人 性 的 设置 ， 能 提高 网 站 的 用 户 体验 。 然 后 
如 果 自 己 的 网 站 对 其 他 用 户 有 用 ， 还 要 设置 RSS 订阅 ， 这 样 有 利于 吸引 自己 的 粉丝 。 

不 仅 如 此 ， 用 户 还 要 设置 网 站 地 图 ， 让 网 友 们 对 网 站 结构 有 一 个 清晰 了 解 ， 有 利于 加 
大 访问 深度 ， 让 他 们 的 角度 遍布 整个 网 站 ， 减 少 跳出 率 。 由 此 看 出 一 个 成 功 的 网 站 必须 要 
有 良好 的 导航 系统 。 要 使 自己 的 网 站 首页 、 内 部 页 都 有 链接 的 指向 ， 另 外 在 网 站 导航 设置 
的 时 候 不 能 堆积 ， 一 个 页 面 有 一 个 链接 就 足够 了 ， 这 样 也 会 使 自己 网 站 的 结构 清晰 明了 ， 
避免 复杂 ， 因 为 重复 的 内 部 链接 设置 会 降低 自己 网 站 的 权重 。 

2. 首页 的 内 页 链接 设置 

网 站 的 首页 一 般 都 是 有 比较 高 的 权重 ， 因 此 ， 在 首页 的 相应 位 置 要 设置 内 页 的 链接 。 
有 些 网 站 管理 员 会 在 自己 的 网 站 上 设置 相应 的 专题 ， 将 内 页 的 重要 内 容 直 接 在 网 站 首页 上 
呈现 ， 这 种 方法 也 是 可 行 的 。 

3. 网 站 内 页 链接 设置 时 要 清晰 明了 ， 避 免 错 误 链 接 


有 些 网 站 管理 员 只 是 重视 网 站 首页 链接 的 建设 ， 对 于 一 些 频道 页 及 内 部 页 都 是 不 做 链 
接 的 ， 或 者 是 把 好 几 个 关键 词 做 同一 个 错 文本 ， 链 接 到 首页 ， 和 希望 采用 这 种 方法 提高 网 站 
首页 的 权重 ， 其 实 这 种 优化 方法 不 可 取 。 首 先 ， 它 会 使 内 部 链接 网 变 得 复杂 ， 不 利于 搜索 
引擎 的 抓 取 ; 其次， 多 个 关键 词 也 让 搜索 引擎 不 知道 哪个 才 是 真正 的 关键 词 ， 长 此 以 往 会 
降低 网 站 的 权重 。 所 以 这 些 错误 的 链接 手法 要 避免 。 


Wh 


7.6 综合 实例 


通过 前 面 章 节 的 学 习 , 相信 已 经 掌握 了 HTML 的 基础 知识 和 基本 操作 。 本 章 开始 以 一 
个 简单 的 旅游 网 站 为 例 ， 将 网 站 的 HTML 代码 根据 该 章节 所 学 ， 分 内 容 、 分 功能 来 书写 ， 
为 了 统一 样式 将 其 中 的 文字 、 段 落 格式 化 使 用 CSS 样式 表 (具体 的 语法 将 在 后 面 章 节 中 详 
细 介 绍 ) 。 最 后 ， 将 在 第 十 三 章 给 出 各 网 页 的 完整 代码 。 
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页 从 关于 天 科 人 工作 页 从 要 而 “人 联 和 天 条 


.首先 来 看 网 站 的 首页 及 相关 子 网 页 ， 如 图 7-23 一 图 7-26 所 示 。 
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图 7-24 景点 信息 二 级 页 面 1 
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图 7-25 景点 信息 二 级 页 面 2 
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图 7-26 联系 页 面 


2. 分 析 主 页 内 容 组 成 。 首 先 ， 它 是 一 个 旅游 类 型 的 网 站 ， 包 括 文字 、 图 片 等 内 容 ; 
其 次 ， 网 站 中 包含 相关 的 链接 。 

3. 本 章 所 学 的 内 容 是 超 链 接 , 用 户 在 相关 文字 上 添加 超 链 接 ， 以 链接 到 二 级 页 面 ( 包 
括 “ 主 页 ”、“ 关 于 我 们 ”、“ 工 作 人 员 ”、“ 相 关 资 源 ”、“ 联 系 我 们 ”等 栏目 ) 。 鉴 
于 篇 幅 只 添加 其 中 的 三 项 ， 其 他 使 用 同样 的 方法 。 


< 人 程序 代码 
主页 上 方 导航 文字 超 链接 的 代码 如 下 : 


<a href="index.html" class="nav"> 主 页 </a> 

<a href="#"” class="nav"> 关 于 我 们 </a> 

<a href="#" class="nav"> 工 作 人 员 </a> 

<a href="gallery.html"” class="nav"> 相 关 资 源 </a> 
<a href="contact.html" class="nav"> 联 系 我 们 </a> 


由 上 述 代码 可 以 看 出 ,用户 单 击 “ 主 页 ””“ 相 关 资 源 ” 和 “联系 我 们 ”三 个 文字 链接 ， 
页 面 将 跳 转 至 相关 内 容 网 页 。 
主页 右 侧 相 关 图 片 超 链 接 的 代码 如 下 : 


<a href="details.html"><img src="images/pic/ 亚 龙湾 .jpg" width="100" 

height="100" alt="pic" title="pic" class="gallery" /></a> 

<a href="details.html"><img src="images/pic/ 大 东海 .jpg" width="100" 
height="100" alt="pic" title="pic" class="gallery" /></a> 

<a href="details.html"><img src="images/pic/ 天 涯 海 角 .jpg" width="100" 
height="100" alt="pic" title="pic" class="gallery" /></a> 

<a href="details.html"><img src="images/pic/ 蝇 支 洲 岛 .jpg" width="100" 
height="100" alt="pic" title="pic" class="gallery" /></a> 

<a href="details.html"><img src="images/pic/ 大 小 洞天 .jpg" width="100" 
height="100" alt="pic" title="pic" class="gallery" /></a> 
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由 上 述 代码 可 以 看 出 ， 分 别 添加 了 图 片 的 超 链接 ， 单 击 相关 图 片 可 以 跳 转 至 相关 内 容 
网 页 。 


7.7 高 手 训练 营 


什么 是 超 链接 ， 超 链接 的 标签 有 哪些 ? 
“target” 属 性 有 哪些 属性 值 ? 
什么 时 候 使 用 锚 点 连接 ? 

4. 创建 一 个 搜索 引擎 推荐 页 面 ， 推 荐 你 所 知道 的 好 用 的 搜索 引擎 网 站 ， 并 设置 到 达 
这 些 引擎 网 站 的 便捷 方式 ， 如 果 页 面 内 容 超出 了 屏幕 的 显示 ， 则 设置 使 用 户 快速 返回 页 首 
的 功能 。 

5. 综合 使 用 锚 点 的 属性 操作 ， 制 作 一 个 人 物 简介 的 网 页 ， 完 成 后 效果 如 图 7-27 所 示 。 
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图 7-27 效果 图 


。83 。 


第 8 章 ”在 网 页 中 添加 多 媒体 元 素 


使 用 多 媒体 已 经 成 为 现在 教学 和 工作 的 主要 手段 和 方式 。 在 网 页 中 只 有 文字 和 图 片 是 
远 远 不 够 的 ， 通 过 添加 多 媒体 元 素 不 仅 可 以 丰富 网 站 内 容 ， 还 可 以 增强 网 页 的 娱乐 性 和 感 
染 力 。 网 页 中 常用 的 多 媒体 元 素 主要 包括 Flash 类 (Flash 动画 、Flash 按钮 、Flash 文本 、 
Flash 视频 等 ) 、Java applets、ActiveX 控件 类 ， 以 及 各 种 音频 文件 (WMA、Mp3 等 ) 、 
视频 文件 (如 Shockwave 影片 、QuickTime、RM、WMYV 等 ) 、 滚 动 字幕 等 。 本 章 主要 介 
绍 如 何 添加 滚动 字幕 、 音 频 和 视频 文件 。 


根据 实际 需要 设置 滚动 字幕 属性 
嵌入 多 媒体 元 素 


本 
D 添加 滚动 文字 字幕 
0 
0 
D 添加 背景 音乐 


8.1 添加 字幕 一 -<marquee> 


在 浏览 网 页 时 ， 经 常会 看 到 一 些 公告 或 者 广告 提示 信息 是 从 左 向 右 或 是 循环 往复 的 滚 
动 文本 ， 称 之 为 滚动 字幕 ， 也 叫 活 动 字 幕 。 滚 动 字 幕 的 使 用 使 得 整个 网 页 更 有 动感 ， 显 得 
更 有 生气 。 现 在 的 网 站 中 也 越 来 越 多 地 使 用 滚动 字幕 来 加 强 网 页 的 互动 性 。 用 Javascript 
编程 和 Dreamweaver 软件 或 是 Flash 动画 等 软件 都 可 以 实现 滚动 字幕 效果 。 而 用 HIML 的 
<marquee> 深 动 字幕 标签 所 需 的 代码 最 少 ， 能 够 减少 网 页 的 加 载 时 间 。<marquee> 标 签 是 双 
标签 ， 首 尾 标签 之 间 的 内 容 就 是 滚动 的 文字 内 容 。 其 语法 为 : 


<marduee> 滚 动 文 字 内 容 </marquee> 
实例 8-1: 添加 滚动 文字 字幕 


<html> 

<head> 

<title> 添 加 滚动 文字 字幕 </title> 

</head> 

<body> 

<marquee><font size=+3 color=red> 欢 迎 使 用 HTML 来 制作 滚动 文字 幕 !</font> 
</marquee> 
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</body> 
</html> 


运行 代码 后 , 可 以 看 到 该 网 页 中 包含 一 个 从 右 至 左 的 红色 文字 滚动 字幕 , 效果 如 图 8-1 
所 示 。 


伯 - 国 国 必 | 半天 友 收 BR 人 @| 合 -总 国 - 回 
总计 四) | 全 c: Docments ana Settines\Adninistrator\ 各 面 加 轩 到 党 加 smsart 周 加 


欢迎 使 用 HTML 来 制作 滚 


图 8-1 ”添加 滚动 文字 字幕 


8.1.1 设置 字幕 背景 颜色 一 一 bgcolor 


为 字幕 添加 背景 颜色 可 以 增强 与 网 页 中 其 他 内 容 的 对 比 效果 ， 起 到 突出 主题 的 作用 。 
“bgcolor” 属 性 用 于 设 定 字幕 的 背景 颜色 。 背 景 颜 色 可 用 RGB、16 ee 
名 称 来 设置 。 其 语法 为 : 


<marquee bgcolor =" 颜 色 的 名 称 "> </marquee> 
<marquee bgcolor ="# 颜 色 代 码 "> </marquee> 
<marquee bgcolor ="rgb 色 "> </marquee> 


实例 8-2: 设置 滚动 字幕 背景 颜色 


<html> 

<head> 

<title> 设 置 滚动 字幕 背景 颜色 </title> 

</head> 

<body> 

<marquee bgcolor="#dddd00"><font size=+2 color=red> 这 是 一 个 黄色 背景 的 文字 字幕 ! 
</font> </marquee><br><br> 

<marquee bgcolor="#0000dd"><font size=+2 color=red> 这 是 一 个 蓝 色 背 景 的 文字 字幕 ! 
</font> </marquee><br><br> 

</body> 

</html> 


运行 代码 后 ， 可 以 看 到 该 网 页 中 包含 两 个 背景 颜色 不 同 的 深 动 字幕 ， 效 果 如 图 8-2 
所 示 。 
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设置 滚动 字 磊 背景 颜色 一 Windovs Internet Ezplorer 


(coements aa setiing WY xX 


文件 编 加 中 喜 看 0 区 Im | 和 mx @@seat 周志 


请 收 半天 。 科 设 告 汪 动 字 埋 至 最 颜色 偷 - 国 - 互 加 ”而 罗 -” 2 全 名 ~ 


图 8-2 ”设置 滚动 文字 字幕 背景 颜色 


8.1.2 设置 字幕 背景 大 小 


在 默认 的 情况 下 , 字幕 的 背景 大 小 与 滚动 文字 的 高 度 相 同 , 与 浏览 器 的 大 小 宽度 一 致 。 
ee 和 “width” 属 性 可 以 设置 深 动 区 域 的 大 小 。“height” 用 于 设 人 J, 字 帮 的 
高 度 ， 特 别 是 文字 在 做 垂直 滚动 时 ， 一 定 要 设置 “height” 的 值 。“width” 用 于 设 定 字幕 
的 宽度 ， 高 度 和 宽度 的 属性 值 可 用 像素 或 可 视 页 面 的 百分比 来 表示 。 其 语法 如 下 : 


height 、width 


<marquee height=" 像 素 " width=" 像 素 "> 滚动 文字 内 容 </marquee> 
<marquee height=" 百 分 比 " width=" 百 分 比 "> 滚动 文字 内 容 </marquee> 


实例 8-3: 设置 字幕 背景 大 小 


<html> 

<head> 

<title> 设 置 字 幕 背 景 大 小 </title> 

</head> 

<body> 

<marquee height="20" bgcolor="#dddd00"><font size=+2 color=red> 这 是 一 个 普 
通 大 小 的 文字 字幕 ! </font></marquee><br><br> 

<marquee height="80"bgcolor="#dddd00"><font size=+2 color=red> 这 是 一 个 改变 
背景 高 度 的 文字 字幕 ! </font> </marquee><br><br> 

<marquee width ="50%" bgcolor="#dddd00"><font size=+2 color=red> 这 是 一 个 改 
变 背 景 宽 度 的 文字 字幕 ! </font></marquee><br><br> 

</body> 

</html> 


运行 代码 后 ， 可 以 看 到 该 网 页 中 包含 了 背景 大 小 不 同 的 三 个 文字 滚动 字幕 ， 效 果 如 图 
8-3 所 示 。 
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设置 字 磋 背景 大 小 - Windows Internet Ezplorer 


ERIEIEIF 


文件 F) 蝙 辑 下 ) 查看 W) 收 襄 天 人) 工具 CT) 帮助 00 x snart [5 


富 惊天 。 | 车 设 告 字 悍 青 晤 大 小 从- 习 出 ”页 面 @) -安全 6) 


起 本 天 下 且 EEC 


图 8-3 设置 字幕 背景 大 小 


8.1.3 设置 字幕 文字 滚动 方向 一 一 direction 
默认 情况 下 ， 文 字 的 滚动 方向 都 是 从 右 向 左 。 实 际 在 制作 网 站 过 程 中 ， 根 据 呈 现 效果 


的 不 同 ， 需 要 显示 不 同 滚动 方向 的 文字 。 用 户 使 用 “direction” 属 性 来 设置 ， 它 包含 的 属 
性 值 如 表 8-1 所 示 : 
表 8-1 direction 的 属性 值 
属性 值 滚动 效果 

left 向 左 滚动 

Tight 向 右 滚动 

u 向 上 滚动 

down 向 下 滚动 


国 通常 向 左 或 向 右 滚动 的 文字 出 现在 广告 或 横幅 中 ， 向 上 或 向 下 滚动 的 文字 出 现在 
网 站 的 公告 栏 中 。 


其 语法 为 : 
<marquee direction=" 属 性 值 "> 滚动 文字 内 容 </marquee> 


实例 8-4: 设置 字幕 文字 的 滚动 方向 


<html> 

<head> 

<title> 设 置 字幕 文字 的 滚动 方向 </title> 
</head> 

<body> 


<marquee bgcolor="#dddd00" direction="left"><font size=+2 color=red> 从 右 
向 左 滚动 的 字幕 ! </font></marquee><br><br> 
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<marquee bgcolor="#dddd00" direction="right"><font size=+2 color=red> 从 左 
向 右 滚动 的 字幕 ! </font></marquee><br><br> 

<marquee bgcolor="#dddd00" width ="50%" direction="up"><font size=+2 
color=red> 向 上 滚动 的 字幕 ! <br> 向 上 滚动 的 字幕 ! </font></marquee><br><br> 

<marquee bgcolor="#dddd00" width ="50%" direction="down"><font size=+2 
color=red> 向 下 滚动 的 字幕 ! <br> 向 下 滚动 的 字幕 ! </font></marquee><br><br> 

</body> 

</html> 


运行 代码 后 ， 可 以 看 到 该 网 页 中 包含 了 4 个 不 同 滚动 方向 的 文字 字幕 ， 效 果 如 图 8-4 
所 示 。 


CT 


TE XT 


图 8-4 设置 字幕 文字 的 滚动 方向 


8.1.4 设置 字幕 文字 滚动 速度 一 一 scrollamount 


中 文字 内 容 需 要 出 现 得 快 一 些 ， 可 以 通过 “scrollamount” 属 性 来 对 字幕 的 滚 
动 速度 进行 设置 。 其 语法 为 : 


<marquee scrollamount =" 属 性 值 "> 滚动 文字 内 容 </marquee> 


“scrollamount” 的 属性 值 就 是 滚动 文字 的 滚动 速度 ， 速 度 的 单位 是 像素 。 


实例 8-5: 设置 字幕 文字 的 滚动 速度 


<html> 

<head> 

<title> 设 置 字幕 文字 的 滚动 速度 </title> 

</head> 

<body> 

<marquee bgcolor="#dddd00" direction="left" scrollamount="10"><font size= 
+2 color=red> 欢 迎 光临 我 的 淘宝 店 ! </font> </marquee><br><br> 
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<marquee bgcolor="#dddd00" direction="left"” scrollamount="30"><font size= 
+2 color=red> 欢 迎 光 临 我 的 淘宝 店 ! </font></marquee><br><br> 

<marquee bgcolor="#dddd00™ direction="]left" scrollamount="50"><font size= 
+2 color=red> 欢 迎 光临 我 的 淘宝 店 ! </font> </marquee><br><br> 

</body> 

</html> 


运行 代码 后 ， 可 以 看 到 该 网 页 中 包含 了 3 个 不 同 滚动 速度 的 文字 字幕 ， 效 果 如 图 8-5 
所 示 。 


说 下 二 带 广 二 的 滚动 下 
GO Oem 

ZH RT | lt 图 上 

安居 册 天 。 让 记 7 * > 加”) Reo ” IRo)- + “| 


图 8-5 设置 字幕 文字 的 滚动 速度 


8.1.5 设置 字幕 文字 滚动 方式 一 一 behavior 
文字 内 容 除 了 上 、 下 、 左 、 右 单方 向 的 滚动 效果 外 ,还 有 往复 滚动 、 滚 动 一 次 等 效果 。 
通过 “behavior” 属 性 可 以 对 字幕 文字 滚动 方式 进行 设置 。 它 包含 的 属性 值 如 表 8-2 所 示 : 


表 8-2 ”behavio 的 属性 值 


只 滚动 一 次 后 停 住 不 动 
字幕 不 停 地 循环 滚动 
字幕 框架 内 来 回 交替 滚动 


slide 


alternate 


其 语法 为 : 
<marquee behavior =" 属 性 值 "> 滚动 文字 内 容 </marquee> 


实例 8-6: 设置 字幕 文字 的 滚动 方式 


<html> 

<head> 

<title> 设 置 字幕 文字 的 滚动 方式 </title> 
</head> 

<body> 
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<marquee bgcolor="#dddd00" direction="left" behavior ="slide"><font size=+2 
color=red> 我 的 字幕 文字 只 滚动 一 次 ! </font></marquee><br><br> 

<marquee bgcolor="#dddd00" direction="]left" behavior ="scroll"><font 
size=+2 color=red> 我 的 字幕 文字 循环 滚动 ! </font></marquee><br><br> 

<marquee bgcolor="#dddd00" direction="left" behavior ="alternate" ><font 
size=+2 color=red> 我 的 字幕 文字 来 回 交替 滚动 ! </font></marquee><br><br> 

</body> 

</html> 


运行 代码 后 ， 可 以 看 到 该 网 页 中 包含 了 3 个 不 同 滚动 方式 的 文字 字幕 ， 效 果 如 图 8-6 
所 示 。 


图 8-6 设置 字幕 文字 的 滚动 方式 


设置 字幕 文字 的 滚动 方式 后 ， 默认 情况 下 , 会 一 直 循环 下 去 ， 当 对 滚动 次 数 有 需要 时 ， 
用 户 可 以 通过 “loop” 循 环 属性 来 设置 滚动 的 次 数 。 其 语法 为 : 


<marquee loop =" 滚 动 的 次 数 "> 滚动 文字 内 容 </marquee> 


8.1.6 设置 字幕 与 周围 元 素 的 间距 一 一 hspace、vspace 


同 图 片 和 文字 段落 设置 ， 当 字幕 需要 和 文字 段落 进行 编排 时 ， 用 户 可 以 通过 “hspace” 
和 “vspace” 属 性 来 设 定 字幕 文字 的 上 下 和 左右 方 与 其 他 元 素 之 间 的 间距 。 其 语法 为 


<marquee hspace =" 水 平 间距 " vspace =" 重 直 间 距 "> 滚动 文字 内 容 </marquee> 
实例 8-7: 设置 字幕 与 周围 元 素 的 间距 


<html> 

<head> 

<title> 设 置 字幕 与 周围 元 素 的 间距 </title> 

</head> 

<body> 

<hr size="7" color="blue "> 

<marquee bgcolor="yellow" height="80" width="600"><font color=red> 普 通 的 
间距 </font></marquee> 
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<hr size="7" color="blue "> 

<marquee bgcolor="gray" height="80" width="600" hspace ="100"><font 
color=red> 设 置 了 水 平 间距 的 字幕 </ font></marquee> 

<hr size="7" color="blue "> 

<marquee bgcolor="green" height="80" width="600" vspace ="100"><font 
color=red> 设 置 了 重 直 间距 的 字幕 </font></marquee> 

</body> 

</html> 


运行 代码 后 ， 可 以 看 出 3 个 滚动 文字 字幕 与 水 平分 割 线 之 间 的 水 平 、 垂 直 间 距 不 同 ， 
效果 如 图 8-7 所 示 。 


设 五 与 月 因 元 未 的 同 拭 


3 由 “全 吕正操 可 内 工具 关中 


图 8-7 设置 字幕 与 周围 元 素 的 间距 


8.1.7 鼠标 的 悬 停 设置 


制作 字幕 时 经 常会 用 到 鼠标 的 翘 停 效果 ， 这 种 效果 可 以 用 “ onmouseover” 和 

“onmouseout” 属 性 来 设置 。 当 鼠标 移动 至 深 动 字幕 上 时 ， 使 用 “onmouseover=stop()” 使 

得 字幕 文字 深 动 停止 ， 当 鼠标 移 开 时 ， 使 用 “onmouseout=start0)” 属 性 使 得 字幕 文字 继续 
滚动 。 其 语法 为 : 


<marquee onmouseover=stop () onmouseout=start () > 滚动 文字 内 容 </marquee> 
实例 8-8: 鼠标 的 悬 停 效果 设置 


<html> 

<head> 

<title> 鼠 标的 悬 停 效果 </title> 

</head> 

<body> 

<marquee bgcolor="yellow" direction="left" ><font size=+2 color=red> 欢 迎 
光临 我 的 网 站 ! </font> </marquee><br><br> 


<marquee bgcolor="yellow" direction="left" onmouseover=stop() onmouseout= 
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start()><font size=+2 color=red> 欢 迎 光 临 我 的 网 站 ! (设置 了 鼠标 悬 停 效 
果 )</font> </marquee><br><br> 

</body> 

</html> 


运行 代码 后 ， 在 网 页 中 ， 当 鼠标 移动 至 第 二 个 滚动 字幕 上 时 ， 字 幕 文字 停止 深 动 ; 当 
鼠标 移 开 时 ， 字 幕 文字 继续 滚动 ， 效 果 如 图 8-8 所 示 。 


鼠标 的 县 停 歼 呆 一 Windowz Jnternet Erplorer 

DO Drveoemsnet 人 x PE I 
文件 中 纺 各 下 查看 WM 收 关 关内 ”工具 TT) 天 有 0 x 各 mert 辐 是 
突 收 训 天 “| 居民 标的 屋 伟 各 暴 蕉 -加 - 口 蕊 ”Im 安 2)- | 
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图 8-8 ”鼠标 的 悬 停 效果 


8.1.8 添加 滚动 图 片 和 超 链接 


使 用 <marquee> 标 签 不 仅 可 以 移动 文字 ， 还 可 以 移动 图 片 。 在 网 页 的 广告 中 ， 经 常会 
见 到 滚动 的 广告 图 片 ， 通 过 单 击 图 片 可 以 链接 到 相关 的 内 容 。 方 法 和 之 前 学 过 的 添加 图 片 
和 超 链 接 完 全 相同 。 其 语法 为 : 


<marquee> 
<a href=" 超 链接 路 径 ">><img src=" 图 片 地 址 "> </a> 加 入 图 像 的 滚动 字幕 
</marquee> 


实例 8-9: 添加 滚动 图 片 和 超 链接 


<html> 

<head> 

<title> 添 加 深 动 图 片 和 超 链接 </title> 

</head> 

<body> 

<marquee bgcolor="gray" direction="left" onmouseover=stop() onmouseout= 
start () ><a href=" iphone 简介 .html"><img src="iphone.jpg" width="80" 
height="120"></a><font size=+2 color=red> 加 入 图 像 的 滚动 字幕 </font> 
</marquee><br><br> 

</body> 

</html> 
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运行 代码 后 ， 效 果 如 图 8-9 所 示 。 
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图 8-9 添加 滚动 图 片 和 超 链接 


通过 单 击 深 动 字幕 中 的 图 片 可 以 跳 转 到 相关 的 链接 内 容 。 


四 <marquee> 标 签 的 属性 较 多 ， 在 应 用 中 要 把 握 一 个 原则 : 能 用 默认 值 的 就 不 要 再 
设置 属性 值 ， 用 什么 属性 就 设置 该 属性 的 值 ， 其 他 属性 就 不 要 再 设置 ， 将 代码 控 
制 在 最 少 的 范围 内 。 


8.2 添加 多 媒体 元 素 


在 互联 网 上 ， 用 户 会 经 常见 到 嵌入 网 页 中 的 多 媒体 元 素 ， 现 在 很 多 浏览 器 已 支持 多 种 
多 媒体 格式 。 多 媒体 元 素 〔 比 如 视频 和 音频 〉 存储 于 媒体 文件 中 ， 可 以 通过 查看 文件 扩展 
名 来 确定 媒体 的 类 型 。 


8.2.1 府 入 多 媒体 标签 一 一 <embed> 


在 加 载 网 页 中 的 音 、 视 频 及 其 他 多 媒体 元 素 时 ， 需 要 安装 相应 的 插件 程序 ， 使 用 
<embed> 标 签 可 以 将 插件 程序 嵌入 网 页 。 使 用 <embed> 标 签 调用 插件 的 优势 在 于 ， 它 允许 
用 户 控制 播放 器 的 某 些 设置 ， 如 回放 、 和 暂停 、 停 止 和 播放 。 其 语法 为 


<embed src=" 多 媒体 文件 路 径 " height=" 播 放 界 面 高 度 " width=" 播 放 界 面 宽度 "></embed > 


下 RE 
单位 是 像素 。 


实例 8-10: 嵌入 多 媒体 元 素 
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<html> 

<head> 

<title> 幅 入 多 媒体 元 素 </title> 

</head> 

<body> 

<embed src=" 凤 凰 传奇 -荷塘 月 色 .wmv" height="400" width="600"></embed > 
</body> 

</html> 


运行 代码 后 ， 可 以 看 到 在 网 页 中 嵌入 了 一 个 可 以 进行 播放 控制 的 视频 (WMYV 格式 ) 
文件 ， 效 果 如 图 8-10 所 示 。 
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图 8-10 翌 入 多 媒体 元 素 


8.2.2 设置 循环 播放 一 一 loop 


浏览 网 页 时 ， 经 常会 遇 到 自动 弹出 并 播放 的 广告 视频 文件 ， 用 户 可 以 通过 “autostart” 
属性 来 控制 视频 文件 是 否 自动 播放 。 当 需要 控制 媒体 文 件 播放 次 数 时 ， 使 用 “loop” 必 性 
进行 设置 。 

“autostart” 和 “loop” 属 性 和 其 他 属性 不 同 ， 它 们 的 属性 值 是 英文 “tue” 和 “false”， 
中 文 翻译 为 真 和 假 。 当 属性 值 为 “tue” 时 ， 分 别 表 示 该 媒体 文件 会 自动 播放 和 不 停 地 无 
限 次 播放 ， 当 属性 值 为 “false” 时 ， 分 别 表 示 该 媒体 文件 不 自动 播放 和 只 会 播放 一 次 。 其 
语法 为 : 

<embed src=" 多 媒体 文件 路 径 " autostart =" 是 否 自动 播放 "></embed > 

<embed src=" 多 媒体 文件 路 径 " loop=" 是 否 为 循环 播放 "></embed -3 


实例 8-11: 设置 多 媒体 自动 和 循环 播放 


<html> 

<head> 
<title> 设 置 自动 和 循环 播放 </title> 
</head> 
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<body> 

<embeqd src=" 凤 凰 传奇 -荷塘 月 色 .wmv" height="300" width="400"></embed> 

<embed src=" 凤 凰 传奇 -荷塘 月 色 .wmv" height="300" width="400" autostart="true" 
loop="true"></embed > 

</body> 

</html> 


运行 代码 后 ， 网 页 中 嵌入 了 两 个 视频 文件 。 第 一 个 没有 进行 其 他 设置 ， 第 二 个 设置 了 
自动 并 循环 播放 ， 效 果 如 图 8-11 所 示 。 


ZNo) Na) HF RKO 
EE BR + Nin- sm- IAo- QO- "| 


图 8-11 设置 自动 和 循环 播放 


8.2.3 ”隐藏 播放 界面 一 一 hidden 


有 时 在 设置 播放 视频 文件 时 ， 不 需要 出 现 插 件 界面 ， 只 需 保留 声音 ， 用 户 可 以 通过 
“hidden” 属 性 来 隐藏 播放 界面 ， 它 的 属性 值 也 是 “tme” 和 “false”。 其 语法 为 : 


<embed src=" 多 媒体 文件 路 径 "hidden=" 是 否 隐藏 播放 界面 "></embedq > 
实例 8-12: 设置 隐藏 播放 界面 


<html> 

<head> 

<title> 设 置 隐藏 播放 界面 </title> 

</head> 

<body> 

下 面 的 视频 文件 播放 时 隐藏 播放 界面 <br> 

<embed src=" 陈 奕 迅 王菲 -因为 爱情 .wmv" width="400" autostart="true" hidden= 
"true"> 

</embed> 

</body> 

</html> 


运行 代码 后 ， 网 页 中 嵌入 的 视频 文件 播放 时 界面 隐藏 ， 效 果 如 图 8-12 所 示 。 
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设 轩 隐藏 播放 界面 一 indo net Exzplorer 
OO. Er miseny |X [PEE 


文件 人 F) 该 经 站 ”查看 MI) 收 寄 夹 愉 工具 fT) 规 助 09 x @smrt 国 世 


识 电大 天 。 大 设置 陪 麻 括 放 界面 国人 当 


下 面 的 视频 文件 播放 时 隐藏 潘 放 界 面 


图 8-12 视频 文件 播放 界面 隐藏 效果 


8.3 添加 背景 音乐 


网 站 中 加 入 背景 音乐 常见 于 个 人 网 站 。 比 如 大 家 做 淘宝 ， 在 淘宝 装修 时 都 会 用 到 
HTML 代码 ， 通 过 代码 可 以 加 载 背景 音乐 ， 这 样 不 仅 能 使 进入 店铺 购物 的 顾客 有 一 个 好 心 
情 ， 同 时 又 能 享受 到 优美 的 旋律 , 也 许 会 增加 你 的 成 交 量 。 声 音 文件 包括 mp3、midi、wav、 
wma 等 格式 ， 通 过 “bgsound” 标 签 来 添加 背景 音乐 ， 它 也 用 到 了 “sre” 属 性 来 设置 音乐 
文件 的 路 径 。 其 语法 为 : 


<bgsound src=" 声 音 文件 路 径 "> 
实例 8-13: 添加 背景 音乐 


<html> 

<head> 

<title> 添 加 背景 音乐 </title> 

</head> 

<body> 

<bgsound src="beyond- 光 辉 岁月 .mp3"> 

<marquee bgcolor="#dddd00" direction="]left" behavior="scroll"><font 
size=+2 color=red> 欢 迎 大 家 光临 我 的 网 站 ! </font></marquee><br><br> 

&nbsp; &nbsp; gnbsp; &nbsp; 大 家 在 添加 背景 音乐 时 需要 清楚 一 点 ， 不 是 所 有 人 都 喜欢 背景 音 
乐 。 建 议 大 家 将 背景 音乐 尽量 设置 为 轻音乐 ， 或 者 仅 在 用 户 希 望 听 到 声音 的 网 页 中 设置 背景 音 
乐 或 将 声音 文件 添加 超 链接 。 

</body> 

</html> 


运行 代码 后 ， 就 会 欣赏 到 优美 的 旋律 ， 效 果 如 图 8-13 所 示 。 
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SO Bvts 


文件 员 编 委 0) 查看 尿床 天 DI 具 ) 种 |x 里 smart 图 台 


瘟 收藏 天。 | 七 庄 加 表 景 音乐 | 答 - 回 - 己 硕 Im- Se 


大 家 在 添加 背景 音乐 时 需要 清楚 一 点 ， 不 是 所 有 人 都 喜欢 背景 音乐 。 建 议 大 家 将 
edt 或 者 仅 在 用 户 项 望 听 到 声音 的 网 页 中 设置 背景 音乐 或 将 声 
言 


图 8-13 添加 背景 音乐 


有 时 根据 实际 需要 ， 背 景 音乐 只 需要 播放 1 次 或 者 循环 播放 。 设 置 播放 的 次 数 使 用 之 
前 学 过 的 “loop ”属性 来 设 定 。 如 果 设 置 循环 播放 , 可 以 将 “loop” 的 属性 值 设置 为 “true”。 


<bgsound 1loop=" 背 景 音 乐 播放 次 数 "> 


加 背景 音乐 体积 越 大 , 页 面 载 入 的 速度 越 慢 , 所 以 尽量 找 体积 小 点 的 音乐 , 如 “midi” 
或 “wma” 格 式 的 音乐 等 。 


8.4 难点 解析 


本 章 难 点 是 嵌入 多 媒体 元 素 标签 的 使 用 。 在 HTML 里 嵌入 文本 和 图 片 之 外 的 元 素 , 就 
会 用 到 典 入 标签 ， 而 嵌入 标签 在 各 浏览 器 之 间 的 不 统一 ， 一 直 是 开发 人 员 很 头痛 的 问题 ， 
这 源 于 嵌入 Applet Java (SUN 公司 ) 小 程序 。 

当时 ， 对 于 “Applet” 的 嵌入 ， 浏 览 器 Netscape 公司 是 使 用 <embed> 标 签 的 。<embed> 
标签 的 好 处 就 是 嵌入 一 个 对 象 只 需要 一 对 标签 , 所 有 参数 都 写 入 该 标签 的 属性 , 非常 方便 。 
而 微软 和 其 他 浏览 器 厂商 都 使 用 <apple 必 专用 标签 ， 主 标签 只 有 几 个 固定 的 属性 ， 那 些 和 
嵌入 内 容 有 关 的 属性 都 放 在 子 标签 <param> 里 〈param 只 有 name、value 这 类 固定 属性 ) ， 
这 种 组 合 标签 ， 就 是 另 一 种 嵌入 标签 <objec 忆 的 前 身 。 

随 着 Flash、 视 频 、 音 频 这 些 多 媒体 元 素 在 网 站 上 的 出 现 ，<embed> 标 签 的 功能 被 扩展 
了 ， 用 于 嵌入 这 些 多 媒体 元 素 。 此 时 微软 正在 ActiveX 技术 普及 时 期 ， 大 力 推行 泛 用 的 
<objec 人 标签 ,专门 用 于 ActiveX 控件 的 嵌入 。<objec 忆 标签 只 是 多 了 “clsid”、“codetype” 
等 属性 ， 主 要 用 来 判别 和 谋 入 内 容 的 类 型 。 

ActiveX 虽然 极 易 开 发 和 使 用 ， 但 却 是 Windows 的 技术 ， 而 且 连 Firefox 的 Windows 


。97 。 


HTMI/CSS 网 页 设计 与 开发 一 站 式 学 习 一 一 难点 /案例 /练习 


版 都 不 支持 它 。 于 是 ， 各 大 浏览 器 厂商 都 倒 向 以 往 被 冷落 的 <embed> 标 签 ， 但 被 W3C 认可 
的 是 <object> 标 签 ， 而 不 是 <embed> 标 签 。 因 为 <embed> 的 属性 是 根据 蔷 入 内 容 类 型 的 不 同 
而 不 同 的 《实质 上 是 针对 “嵌入 内 容 解读 插件 ”而 写 的 属性 ) ， 无 法 定 死 ， 这 对 于 标准 来 
说 就 不 好 界定 。 
下 面 ， 针 对 <embed> 与 <objec 亿 标签 分 别 在 正 6 和 FireFox3 的 Windows 版 中 柑 入 多 媒 
体 元 素 ， 来 做 一 个 对 比 。 
首先 ， 嵌 入 了 一 个 Flash (swf 文件 ，MIME 为 application/x-shockwave-flash) 和 一 个 音 
频 (mp3 文件 ，MIME 为 audio/mpeg) ， 分 别 写成 四 种 形式 的 HIML 代码 在 浏览 器 中 浏览 
(1) 两 个 多 媒体 元 素 的 嵌入 都 使 用 <embed>。 
(2) 两 个 多 媒体 元 素 的 嵌入 都 使 用 <object>( 只 靠 clsid 识别 )。 
(3) 两 个 多 媒体 元 素 的 嵌入 都 使 用 <object> 同时 使 用 clsid 与 codetype 识别 )。 
(4) 两 个 多 媒体 元 素 的 能 入 都 使 用 <object>〈 只 靠 codetype 识别 )。 
下 6 的 显示 结果 为 : 
(1) 两 个 嵌入 都 正常 (mp3 默认 是 WMP 的 ActiveX 控件 打开 ; 若 QuickTime ActiveX 
控件 注册 了 mp3 的 MIME， 则 由 QuickTime ActiveX 控件 打开 ， 且 可 能 有 安全 警告 ) 。 
(2) 两 个 嵌入 都 正常 〈clsid 填写 哪个 ActiveX 控件 的 ， 就 用 哪个 打开 ) 。 
(3) 两 个 嵌入 都 正常 (clsid 填写 哪个 ActiveX 控件 的 ， 就 用 哪个 打开 ) 。 
(4) Flash 嵌入 正常 ，mp3 音频 嵌入 失败 〈 显 示 成 一 个 无 法 输入 的 文本 框 ) 。 
FireFox 3 的 显示 结果 为 : 
(1) 两 个 嵌入 都 正常 (mp3 默认 无 法 打开 ， 除 非 type 属性 改 用 WMP 专用 MIME。 
若 QuickTime 插件 注册 了 mp3 的 MIME， 则 由 QuickTime 插件 打开 ) 。 
(2) 两 个 嵌入 都 失败 〈 空 白 ) 。 
(3) 两 个 嵌入 都 失败 〈 空 白 ) 。 
(4) 两 个 嵌入 都 失败 〈 空 白 ) 。 
测试 结果 是 : <embed> 标 签 兼容 性 较 强 ， 而 <object> 标 签 只 能 在 使 用 在 下 中 。 


_ 


8.5 综合 实例 


继续 上 一 音 的 综合 实例 ， 根 据 本 章 所 学 在 网 站 的 主页 中 添加 一 个 欢迎 字幕 。 
圈 设计 分 析 

1 滚动 字幕 一 般 在 网 页 的 顶部 。 

2. 在 网 页 <body> 标 签 里 写 代码 。 


地 > 程序 代码 
添加 深 动 字幕 的 代码 如 下 : 
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<marquee bgcolor="#FFFF00" height="20" width="1014" style="color: #FF0000"> 
<fontgnbsp; color=red> 欢 迎 访问 我 们 的 网 站 </ font></marquee> 


运行 代码 后 如 图 8-14 所 示 。 


ERETIEOEZETTIEZ 
© - [Br vr Ri aaa 国 贺 区 | [Ba rn EE 
语 帘 着 Mz | 从 -加 各 - 人 NED. 合 IRO- 


关于 委 们 他 工作 人 页 个 标志 四 


党 


三 亚 阳光 充足 长 夏 无 亏 。 素 有 天 烙 大 温 衬 、 夭 色 事主 全 之 种 ， 
蛙 气 也 温和 ， 属 和 下 的 热 检 海 洋 性 气候， 全 于 二 均 气 注 25.5 蕴 ,年 
本 训话 25. 1 及 ， 立 季 老 本 最 低温 实 22 度 ， 适 宣 四 雁 涯 水 和 开展 


了 欢迎 访问 我 们 的 网 站 

0 年 1 月 ， 是 一 家 古 入 菜 行业 提 江 一 伟 化 电子 1 
如 在 线 化 了 下 腾 隐 正直 开 必 : 

和 网 ( EC 平台 ) ,中 攻 最 大 的 际 基 天 品 预 


,中 国 取消 同业 合 仁 着 达 于 各 ， 内 首 个 


关 将 上 运动。 


t "用 那 卫 是 中国 是 大 在 并 入 及 牛市 ， = N 
上天 垂 天 为 百 可 双 守 模 兴 扫 区 百 刀 条 施 基 检 
LA 路 以 及 几 十 万 件 单项 该 节 产 0 也 J 服 
| 务 ， 旗 To 昌 放行 针 妇 世 1 万 家 se | 
过 本 
3 我 的 电 褒 EE 
图 8-14 添加 字幕 


用 户 还 可 以 尝试 添加 背景 音乐 等 多 媒体 元 素 。 


8.6 ”高 手 训 练 营 


1， 添加 滚动 字幕 时 ， 如 何 控制 它 的 速度 和 方向 ? 
2. 嵌入 多 媒体 标签 <embed> 和 <img> 标 签 有 什么 不 同 ? 
3. 设计 一 个 个 人 网 站 的 首页 ， 采 用 滚动 字幕 的 方式 宣传 网 站 ， 使 得 主页 页 面 信息 更 
加 生动 。 
综合 前 面 所 学 的 编辑 网 页 知识 ， 制 作 一 个 功能 完善 的 多 媒体 站 点 。 要 求 包括 嵌入 


4.， 综合 前 
视频 的 网 页 、Flash Video 网 页 、 点 播音 乐 的 网 页 ， 最 后 添加 页 面 之 间 的 链接 。 
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在 制作 网 页 时 ， 使 用 表格 可 以 辅助 页 面 的 布局 及 用 来 编排 和 定位 文本 和 其 他 相关 的 对 
象 〈 比 如 图 片 、 音 频 、 视 频 、 链 接 、 表 单 等 等 ) ， 这 样 使 得 网 页 中 的 数据 和 对 象 看 上 去 一 
目 了 然 ， 便 于 比较 、 分 析 、 综 合 和 使 用 。HITML 具有 很 强 的 表格 编辑 功能 ， 用 户 可 以 方便 
地 创建 出 各 种 规格 的 表格 ， 并 且 能 对 表格 进行 相关 修饰 。 

目前 大 多 数 网 站 都 是 利用 表格 来 制作 的 。 使 用 表格 设计 网 页 的 好 处 是 ， 你 能 完全 控制 
和 编辑 对 象 ， 不 用 很 繁琐 的 利用 CSS 层 秋 样式 表 来 完成 ， 而 且 不 会 影响 到 其 他 表格 或 者 单 
元 格 里 的 对 象 。 


本 章 要 点 : 

表格 的 结构 

表格 边框 border 属性 
表格 的 行 标签 <tr> 的 各 属性 

单元 格 标签 <caption> 的 各 属性 
表格 嵌 套 的 使 用 方法 
<div> 层 标签 的 使 用 


[= 二 加 固有 


9.1 创建 表格 


制作 网 页 包含 了 设计 、 排 版 、 添 加 内 容 等 步骤 ， 而 构思 是 网 站 设计 的 前 提 。 在 利用 表 
格 制作 网 页 时 ， 要 合理 规划 网 页 的 布局 。 比 如 ， 在 网 页 中 添加 一 个 表格 ， 可 分 为 上 、 中 、 
下 三 部 分 ， 其 中 ， 表 格 的 上 面部 分 放置 网 页 的 标题 或 LOGO 图 片 ; 中 间 部 分 为 整个 网 页 的 
主体 内 容 ， 此 外 ,还 可 以 在 单元 格 中 再 添加 儿 个 表格 , 将 内 容 分 类 别 、 分 层次 地 合理 规划 ; 
底部 部 分 主要 就 是 相关 的 制作 信息 。 当 然 ， 这 只 是 一 个 简单 的 布局 ， 在 实际 制作 过 程 中 不 
是 一 成 不 变 的 。 


9.1.1 定义 表格 标签 


HTML 中 定义 表格 的 标签 是 <table>, 它 是 双 标 签 。 一 个 表格 中 包括 <table>、<tr> 和 <td> 
三 个 基本 元 素 。 首 标签 <table> 和 尾 标签 </table> 分 别 表示 一 个 表格 的 开始 与 结束 ; “tr” 是 
“table row〔 表 格 行 ) ”的 缩写 ， 用 于 表示 一 行 的 开始 和 结束 ， 表 格 有 多 少 个 “tr” 就 有 多 
少 行 ; “td” 是 “table data (表格 数据 ) ”的 缩写 ， 用 于 表示 行 中 各 个 单元 格 的 开始 和 结 


<table> 
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束 。 其 语法 为 : 


<table> 

丁字。 

<tq> 单 元 格 中 的 文字 </tq> 
<tqd> 单 元 格 中 的 文字 </tq> 
</tr> 

SE 

<td> 单 元 格 中 的 文字 </td> 
<td> 单 元 格 中 的 文字 </td> 
</tr> 


外 有 两 个 概念 不 要 混淆 ; 表格 与 单元 格 。 它 们 的 关系 是 整体 与 局 部 的 关系 。 描 述 
整个 表格 的 属性 放 在 <table > 标签 里 ， 描 述 单元 格 的 属性 放 在 <tr> 和 <td> 标 


然 


实例 9-1: 创建 一 个 四 行 两 列 的 表格 


<html> 

<head> 
<title> 创 建 表格 </title> 
</head> 

<body> 

<h3> 毛 主席 诗词 鉴赏 一 一 卜 算 子 咏 梅 七 律 </h3> 
<table> 

ELS 

<tqd> 风 雨 送 春 归 </td> 
<td> 飞 雪 迎 春 到 </td> 
</tr> 

ELS 

<td> 已 是 悬崖 百丈 冰 </td> 
<td> 犹 有 花枝 俏 </td> 
WE 

EE 

<td> 俏 也 不 争 春 </td> 
<td> 只 把 春来 报 </td> 
</tr> 

< 

<td> 待 到 山花 烂漫 时 </td> 
<td> 她 在 从 中 笑 </td> 
</tr> 

</table> 
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</body> 


</html> 


运行 代码 后 ， 可 以 看 到 网 页 中 添加 了 一 个 内 容 为 毛泽东 诗词 的 表格 ， 只 是 该 表格 没有 
显示 边框 ， 效 果 如 图 9-1 所 示 。 


文件 加 护 覃 0) 去 看 Mm 少 庚 天 有 ED 症 再 功 00 Ea 
has hn | 全 -日 -S 


毛 主席 诗词 鉴赏 一 一 卜 算 子 咏 梅 十 律 


风雨 送 春 归 飞 雪 迎春 到 
己 是 悬崖 百 克 站 犹 有 花枝 俏 
俏 也 不 争 春 。 “只 把 春来 报 

背 到 山花 烂漫 时 她 在 从 中 笑 


图 9-1 添加 表格 

还 有 一 类 特殊 的 单元 格 叫做 表 头 单元 格 ， 是 用 首 标签 <thb> 和 尾 标签 </th> 组 成 的 。 表 头 
单元 格 一 般 位 于 每 一 列 的 第 一 行 ， 而 且 表 头 单元 格 中 的 文字 内 容 用 “ 粗 体 ”显示 ， 其 语法 
同 <td> 标 签 的 使 用 方法 。 
9.1.2 ”设置 表格 边框 的 宽度 一 一 border 

默认 情况 下 ， 表 格 是 不 显示 边框 的 。 为 了 更 好 地 区 分 内 容 ， 用 户 可 以 使 用 “border” 
属性 来 设置 表格 的 边框 宽度 大 小 。 边 框 宽度 的 属性 值 为 像素 ， 值 越 大 ， 边 框 越 宽 。 其 语 
法 为 : 


<table border=" 边 框 的 宽度 "> 
实例 9-2: 设置 表格 的 边框 宽度 


<html> 

<head> 
<title> 设 置 表格 的 边框 宽度 </title> 
</head> 

<body> 

<h3> 普 通 大 小 的 边框 </h3> 
<table border="2"> 
<tr> 

<th> 姓 名 </th> 
<th> 地 址 </th> 
<th> 通 讯 方式 </th> 
<th> 电 子 邮 件 </th> 


二 由 
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<Ep> 

<to></Ed> 
<td> 北 京 </td> 
<td>123456789</td> 
<td>1238@123 .com</td> 
<HEr> 

</table> 

<h3> 加 粗 的 边框 </h3> 
<table border="10"> 
“EE 

<th> 姓 名 </th> 
<th> 地 址 </th> 
<th> 通 讯 方 式 </th> 
<th> 电 子 邮 件 </th> 
</tr> 

<EES> 

<td> 张 三 </td> 
<td> 北 京 </td> 
<td>123456789</td> 
<td>123@123.com</td> 
Er 

</table> 

</body> 

</html> 


运行 代码 后 ， 可 以 看 到 网 页 中 添加 了 两 个 表格 的 边框 大 小 不 同 ， 效 果 如 图 9-2 所 示 。 


设置 表格 的 边框 宽度 - Windows Internet Explorer 
TO- 加 coeeete ois [F 
文件 ) 编辑 中) 查看 WV) 收藏 检 () 工具 CT) 帮助 00 x 名 smert 转台 


请 收 训 天 莉 设置 表格 的 边框 宽度 入 - 园 - 己 师 夯 o)- 安全 G)- 


普通 大 小 的 边框 


姓名 地 址 通讯 方式 “电子 邮件 | 
张 三 北京 123456789|1238123. com | 


加 粗 的 边框 


姓名 地 址 通讯 方式 ”电子 邮件 
胀 三 | 北京 |123456789 |1238123. com 


轨 ”“border” 属 性 用 于 指定 表格 四 周边 框 的 宽度 。 如果 “border” 的 属性 值 发 生疏 变 ， 
那么 只 有 表格 周围 边框 的 尺寸 会 发 生变 化 。 表 格 内 部 的 边框 则 是 默认 的 像素 宽 
度 。 如 果 设 置 “border="0"”， 则 显示 没有 边框 的 表格 。 
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9.1.3 ”设置 表格 边框 的 颜色 一 一 bordercolor 


默认 情况 下 ， 表 格 边框 的 颜色 为 灰色 。 为 了 达到 较 好 的 视觉 效果 ， 根 据 布局 需要 可 以 
使 用 “bordercolor” 属 性 来 设置 边框 的 颜色 ， 颜 色 的 属性 值 设置 同 前 面 几 章 中 所 述 〈 如 果 
“border-"0"” 则 无 法 改变 颜色 ) 。 其 语法 为 : 


<table border=" 边 框 的 宽度 "” bordercolor=" 边 框 的 颜色 "> 
实例 9-3: 设置 表格 边框 的 颜色 


<html> 

<head> 
<title> 设 置 表格 边框 的 颜色 </title> 
</head> 

<body> 

<h3> 表 格 的 边框 为 红色 </h3> 
<table border="3" bordercolor="red"> 
<tr> 

<th> 姓 名 </th> 
<th> 地 址 </th> 
<th> 通 讯 方 式 </th> 
<th> 电 子 邮 件 </th> 

</tr> 

<tr> 

<td> 张 三 </td> 
<td> 北 京 </td> 
<td>123456789</td> 
<td>123@123.com</td> 
</tr> 

</table> 

<h3> 表 格 的 边框 为 黄色 </h3> 
<table border="3" bordercolor="yellow"> 
E> 

<th> 姓 名 </th> 
<th> 地 址 </th> 
<th> 通 讯 方式 </th> 
<th> 电 子 邮 件 </th> 

EE 

<Er> 

<td> 张 三 </td> 
<tq> 北 京 </td> 
<td>123456789</td> 
<td>123@123.com</td> 
</tr> 

</table> 
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</body> 
</html> 


运行 代码 后 ， 可 以 看 到 网 页 中 两 个 表格 的 边框 颜色 不 同 ， 效 果 如 图 9-3 所 示 。 


设置 表格 边框 的 颜色 一 Windows Internet EzpIorer 


cnoements ma se lss x) [F 
文件 0) 名和 E) 查看 W 路 守 天 内 工具) 帮助 0 x 各 swat 图 加 
宣 收 藏 天 。 忽 设 置 表格 边框 的 辣 色 丛 - 国 -局 吕 - WE)- 6)- ” 


表格 的 边框 为 红色 
姓名 | 地 址 | 通讯 方式 | 电子 邮件 | 


了 吐 三 Ht 京 |123456789]1238123. com| 


地 址 通讯 方式 ”电子 邮件 


京 123456789 1238123. com| 


图 9-3 设置 表格 边框 的 颜色 


9.1.4 设置 表格 内 文字 与 边框 的 距离 一 一 cellpadding 


从 前 几 个 实例 效果 图 中 可 以 看 出 ， 默 认 情况 下 ， 表 格 内 的 文字 紧 贴 着 边框 。 通 过 
“cellpadding” 属 性 可 以 调整 文字 与 边框 之 间 的 距离 。 其 语法 为 : 


<table cellpadding=" 文 字 与 边框 的 距离 "> 


实例 94， 设置 表格 内 文字 与 边框 的 距离 


<html> 

<head> 

<title> 设 置 表格 内 文字 与 边框 的 距离 </title> 
</head> 

<body> 

<h3> 没 有 设置 “cellpadding” 属 性 的 表格 </h3> 
<table border="2" bordercolor="red"> 
站 > 

<th> 姓 名 </th> 

<th> 地 址 </th> 

<th> 通 讯 方 式 </th> 

<th> 电 子 邮 件 </th> 
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hy 


生 了 变化 ， 效 果 如 图 
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1 

< 
<td> 张 三 </td> 
<td> 北 京 </td> 


<td>123456789</td> 
<td>123@123.com</td> 


<AET> 

<tr> 
<td> 李 四 </td> 
<td> 上 海 </td> 


<td>987654321</td> 
<td>3218321. com</td> 


</tr> 
</table> 


<h3> 设 置 了 文字 与 边框 的 距离 的 表格 </h3> 


<table border="2" bordercolor="red" cellpadding="15"> 


<tEr> 
<th> 姓 名 </th> 
<th> 地 址 </th> 


<th> 通 讯 方式 </th> 
<th> 电 子 邮 件 </th> 


</tr> 

4 
<td> 张 三 </td> 
<td> 北 京 </td> 


<td>123456789</td> 
<td>123@123.com</td> 


</tr> 

EPS 

<td> 李 四 </tqd> 
<td> 上 海 </td> 


<td>987654321</td> 
<td>321Q@321. com</td> 


< 
</table> 
</body> 
</html> 


运行 代码 后 ， 可 


[以 看 到 设置 了 “cellpadding” 


"Ws 


9-4 所 示 。 


属性 的 表格 中 文字 与 边框 四 周 的 距离 发 


第 9 章 添加 表格 


讽 雪 表格 内 文字 与 边 寿 的 下 高 一 Findows 


出 cemeats ad SettingsWaai 


ET ETN TE 各 smat 图 台 
竣 必 麻 天 | 乱 设 表格 内 文字 与 答 芥 - 回 - 己 过 -中 - RE6)- 工具 - 因 - ” 
没有 设置 “cellpadding” 属 性 的 表格 
通讯 方式 
[123456789 
(987654 
设置 了 文字 与 边框 的 距离 的 表格 
姓名 | 地 址 | 通讯 方式 电子 邮件 
张 三 ‖ 北京 | 123456789 | 1238123. com 
地 四 |‖ 上 海 | 987654321 | 3218321. com 
成 ET 在- io0% -| 


图 9-4 设置 了 文字 与 边框 距离 的 表格 效果 


9.1.5 ”调整 表格 中 单元 格 之 间 的 距离 一 一 cellspacing 


在 表格 中 单元 格 之 间 的 距离 也 可 以 发 生变 化 ， 通 过 “cellspacing” 属 性 进行 设置 。 其 
语法 为 : 


<table cellspacing=" 单 元 格 之 间 的 距离 "> 
实例 9-5: 设置 单元 格 之 间 的 距离 


<html> 

<head> 

<title> 设 置 单元 格 之 间 的 距离 </title> 
</head> 

<body> 
<h3> 正 常 单元 格 之 间 的 距离 </h3> 

<table border="2" bordercolor="red"> 
< 

<th> 姓 名 </th> 

<th> 性 别 </th> 

<th> 年 龄 </th> 

<th> 职 务 </th> 

</tr> 


EP 
<td> 张 三 </td> 
<td> 男 </td> 
<td>30</td> 
<td> 工 程 师 </td> 
二 /大 坟 

E> 
<td> 李 四 </td> 
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<td> 女 </td> 
<td>25</td> 
<td> 助 理工 程 师 </td> 
</tr> 

</table> 

<h3> 设 置 单元 格 之 间 的 距离 </h3> 
<table border="2" bordercolor="blue" cellspacing="10"> 
<tr> 

<th> 姓 名 </th> 
<th> 性 别 </th> 
<th> 年 龄 </th> 
<th> 职 务 </th> 
</tr> 

<tr> 

<td> 张 三 </td> 
<td> 男 </td> 
<td>30</td> 
<td> 工 程 师 </td> 
</tr> 

SE 

<td> 李 四 </td> 
<td> 女 </td> 
<td>25</td> 

<td> 助 理工 程 师 </td> 
<AEr> 

</table> 

</body> 

</html> 


运行 代码 后 ， 可 以 看 到 设置 了 “cellspacing” 属 性 的 表格 中 每 个 单元 格 之 间 的 距离 变 
大 了 ， 效 果 如 图 9-5 所 示 。 


设置 单元 格 之 间 的 距离 - Windows Internet Explorer 


央 cements ed Settines Minis SB ty x |) 
立 件 人 六 如 E 查看 W 收藏 丈 Q) 工具 m) 帮助 0 x 外 suat 膨 多 
会 收 底 类 | 由 设置 昔 元 覆 之 间 的 包 宣 丛 " 国 - 习 哺 ”，X 四 中 ”去 E6) ”IJ 国 - 


正常 单元 格 之 间 的 距离 


姓名 性别 职务 


红 三 ]30 _] 玫 程 师 
医 机 区 | 二 | 隔 证 工程 


图 9-5 设置 单元 格 之 间 的 距离 


六 央 旺 生 
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设置 表格 的 基本 属性 


为 了 使 得 表格 在 网 页 中 的 布局 更 合理 ， 样 式 更 加 美观 ， 数 据 内 容 更 加 一 目 了 然 ， 我 们 


要 对 表格 进行 相应 的 修饰 。 


9.2.1 设置 表格 的 大 小 一 一 width、height 
表格 的 大 小 尺寸 是 默认 的 根据 单元 格 的 内 容 自动 进行 调整 的 。 用 户 同样 可 以 通过 相关 


属性 对 表格 的 宽度 和 高 度 进行 设置 。“width” 属 性 用 来 设置 表格 的 宽度 ; 


用 来 设置 表格 的 高 度 。 其 语法 为 


<table width=" 表 格 的 宽度 " 
实例 9-6: 设置 表格 的 大 小 


<html> 
<head> 


height=" 表 格 的 高 度 "” > 


<title> 设 置 表格 的 宽度 和 高 度 </title> 


</head> 
<body> 


<h3> 没 有 设置 大 小 属性 的 表格 </h3> 


<table border="2" bordercolor="grey"> 


<tr> 

<td> 一 曲 新 词 酒 一 杯 ，</td> 
<td> 去 年 天 气 旧 亭 台 。</td> 
<td> 夕 阳 西 下 几时 回 ? </td> 
</tr> 

<t¥> 

<td> 无 可 奈何 花 落 去 ，</td> 
<td> 似 曾 相 识 燕 归 来 ，</td> 
<td> 小 园 香 径 独 徘徊 。</td> 
</tr> 

</table> 


<h3> 设 置 了 宽度 和 高 度 的 表格 </h3> 
<table border="2" bordercolor="grey" width="600" height="300" > 


<td> 一 曲 新 词 酒 一 杯 ，</td> 
<td> 去 年 天 气 旧 亭 台 。</td> 
<td> 夕 阳 西 下 几时 回 ? </td> 


< 


> 

<td> 无 可 奈何 花 落 去 ，</td> 
<td> 似 曾 相识 燕 归 来 ，</td> 
<td> 小 园 香 径 独 徘徊 。</td> 


“height” 属 性 
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</tr> 
</table> 
</body> 
</html> 


运行 代码 后 效果 如 图 9-6 所 示 。 


设置 表格 的 宽度 和 两 度 - Yindowz Interne 


?Be oments ma settinesninisr || |X | |P EE 


锭 竹 忆 ) 查看 W) 路 训 夫 UW) 工具 UI) 大 助 00 下 多 swert 周 是 
| 吐 |-| 加 | 独 设 .x 年 "- 且 刁 二 ” 克 t)， 雪 主 史 + 


没有 设置 大 小 属性 的 表格 


三 由 新 半 酒 一 杯 ，| 去 年 天 气 旧 玲 襄 。|| 儿 风琴 下 几时 回 ? 
死 可 奈何 花 落 去 ，| 似 曾 相 识 匣 归 来 ，]| 小 园 知 征 独 菲 息 。 


设置 了 宽度 和 高 度 的 表格 


一 由 新 词 酒 一 杯 ， 上 去 年 天 气 | 日 亨 台 - | 儿 阳 西 下 几时 回 ? 


无 可 训 向 花 落 去 ， | 似曾相识 磁 娄 大， | 小 四 香 往 独 优 惫 。 


图 9-6 设置 了 表格 大 小 的 效果 


从 图 9-6 中 不 难看 出 ， 整 个 表格 的 高 度 和 宽度 发 生 了 变化 。 而 且 当 浏览 器 大 小 发 生变 


没有 设置 大 小 属性 的 表格 


= 
环 | 名 。 [Ee 


[于 可 夺 何 花 阔 | 似曾相识 浆 归 | 小 园 香 径 独 徘 
去， | 来， | 和 


设置 了 宽度 和 高 度 的 表格 


一 曲 新 词 酒 一 杯 ， | 去 年 天 气 | 昌 亭 台 。 


大 可 过 何 兹 将 去 ， | 似 营 相识 薪 归 来 ， 


EE lO us| 


图 9-7 浏览 器 大 小 调整 后 的 表格 效果 


从 图 9-7 中 可 以 看 出 , 浏览 嚣 变 小 后 , 没有 设置 表格 尺寸 大 小 的 表格 大 小 进行 了 调整 ， 
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而 设置 了 表格 尺寸 大 小 的 表格 大 小 保持 不 变 。 

9.2.2 ”设置 表格 的 对 齐 方式 一 -align 
表格 在 整个 网 页 中 的 位 置 可 以 通过 “align” 属 性 来 进行 调整 。 其 语法 为 : 
<table align=" 表 格 的 对 齐 方 式 "> 
“align” 属 性 有 三 个 属性 值 ， 如 表 9-1 所 示 : 


表 9-1 align 的 属性 值 


属性 值 在 网 页 中 的 对 齐 效 果 


left -对齐 


iight 靠 右 对 齐 


居中 对 齐 


center 


实例 9-7: 设置 表格 的 对 齐 方 式 


<html> 

<head> 

<title> 设 置 表格 的 对 齐 方 式 </title> 
</head> 

<body> 

<h3> 靠 左 对 齐 的 表格 </h3> 

<table border="2" bordercolor="grey" align="]left"> 
直下 天 六 

<th> 物 品 </th> 

<th> 产 地 </th> 

<th> 数 量 </th> 

</tr> 

> 

<tqd> 大 米 </td> 

<tqd> 东 北 </td> 

<td>3 万 吨 </td> 

</tr> 
</table><br><br><br><br> 

<h3> 靠 右 对 齐 的 表格 </h3> 

<table border="2" bordercolor="grey" align="right"> 
<tr> 

<th> 物 品 </th> 

<th> 产 地 </th> 

<th> 数 量 </th> 

i 

和 本 衬 


ws 


HTMIL/CSS 网 页 设计 与 开发 一 站 式 学 习 一 一 难点 /案例 /练习 


<td> 大 米 </td> 

<td> 东 北 </td> 

<td>3 万 吨 </td> 

六 /ET 
</table><br><br><br><br> 
<h3> 居 中 对 齐 的 表格 </h3> 
<table border="2" bordercolor="grey" align="center"> 
<tr> 

<th> 物 品 </th> 

<th> 产 地 </th> 

<th> 数 量 </th> 

过 /> 

< 

<td> 大 米 </td> 

<td> 东 北 </td> 

<td>3 万 吨 </td> 

</tr> 

</table> 

</body> 

</html> 


运行 代码 后 效果 如 图 9-8 所 示 。 


设置 表格 的 对 齐 方式 - Windows Internet Explorer 
SO cv mlseuine 同 [本 区 |] 上 
文件 F) 护 锋 全 查看 9) 收 基 严 Q) 工具 0T) 帮助 00 x 盏 soet 图 加 


高 收 夺 天 。 荐 设置 表格 的 对 弄 方式 人 - 3 顺 ”页 面 D) ”安全 6) - 
车 左 对 齐 的 表格 


物品 产地 数量 
[来 | 条 天 |8 历 本 


车 右 对 齐 的 表格 


物品 产地 数量 
大 来 | 友 北 |8 历 开 


居中 对 齐 的 表格 


物品 产地 数量 
大 关东 拨弄 


图 9-8 设置 了 表格 对 齐 方式 的 效果 


9.2.3 设置 表格 的 背景 
同 设置 页 面 背 景 一 样 ， 设 置 表格 背景 也 可 分 为 设置 背景 颜色 和 背景 图 像 。 
1. 设置 表格 背景 颜色 
设置 表格 背景 颜色 可 以 更 加 突显 表格 ， 使 表格 主题 更 加 明了 。 其 语法 为 : 


“i 
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<table bgcolor=" 背 景 颜色 "> 


实例 9-8: 设置 表格 背景 颜色 


<html> 

<head> 

<title> 设 置 表格 背景 颜色 </title> 

</head> 

<body> 

<table border="2" bordercolor="grey" width="600" height="300" cellpadding= 
"10" bgcolor="#FFFF00"> 

<tr> 

<th> 物 品 </th> 

<th> 产 地 </th> 

<th> 数 量 </th> 

</tr> 

<tr> 

<td> 大 米 </td> 

<tqd> 东 北 </td> 

<td>3 万 吨 </td> 

</tr> 

<tr> 

<td> 椰 子 </td> 

<td> 海 南 </td> 

<td>1 万 吨 </td> 

</tr> 

</table> 

</body> 

</html> 


运行 代码 后 ， 表 格 的 背景 颜色 发 生 了 变化 ， 效 果 如 图 9-9 所 示 。 


设置 表格 背景 古色 - Windows en Explorer 


CIE @ c \pocments md Settines' ||4+ | [|x| | 上 


文件 ) 编辑 于) 查看 VW) 收 着 严 内 工具 GT) 帮助 00 x “名 smat 图 加 


请 必 谊 天 。 滞 设 轩 表 褒 青 具 褒 色 侩 "月 - 马 名- 0) 安全 8)- 


图 9-9 设置 了 表格 背景 颜色 的 效果 
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2. 设置 表格 背景 图 像 


设置 表格 背景 图 像 时 需要 注意 ， 这 也 是 一 个 超 链接 ， 要 将 背景 图 像 的 路 径 设置 正确 ， 
避免 找 不 到 图 像 。 其 语法 为 : 


<table background=" 图 像 文件 所 在 的 路 径 "> 
实例 9-9: 设置 表格 背景 图 像 


<html> 

<head> 
<title> 设 置 表格 背景 图 像 </title> 
</head> 

<body> 


<table border="2" bordercolor="grey" width="300" height="300" cellpadding= 
"10"” background=" 蓝 天 白云 .jpg "> 

<tr> 

<th> 物 品 </th> 

<th> 产 地 </th> 

<th> 数 量 </th> 

</tr> 

KE 

<td> 大 米 </td> 

<td> 东 北 </td> 

<td>3 万 吨 </td> 

</tr> 

<tr> 

<td> 椰 子 </td> 

<td> 海 南 </td> 

<td>1 万 吨 </td> 

</tr> 

</table> 

</body> 

</html> 


文件 8 连 得 G) 查看 00) 收 基 赤 内。 工 贞 T) 者 起 00 x 多 mnt 国志 
寅 尿 据 天。 荐 记 二 者 可 旦 E ] 熏 " 加 - 己 吕 ”7 基 m- 2o- 


E33 国 二 3 -0 > 


图 9-10 设置 了 表格 背景 图 像 的 效果 


.114， 
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9.3 表格 的 行 属性 


已 经 学 习 过 表格 的 基本 属性 ， 有 时 用 户 需 要 对 具体 的 某 一 行进 行 相关 属性 的 设置 ， 本 
节 学 习 表 格 的 行 属性 。 


9.3.1 设置 表格 的 行 高 度 一 一 height 


在 制作 表格 时 经 常会 遇 到 某 一 行 的 高 度 不 同 于 其 他 行 ， 用 户 可 以 通过 “height” 属 性 
来 设置 。 其 语法 为 : 


<tr height=" 某 一 行 的 高 度 "> 
实例 9-10: 设置 表格 的 行 高 度 


<html> 

<head> 

<title> 设 置 表格 某 一 行 的 高 度 </title> 

</head> 

<body> 

<h3> 北 京 旅游 攻略 </h3> 

<table border="2" bordercolor="grey" width="500"> 

EE 

<th> 姓 名 </th> 

<th> 评 论 </th> 

~ EE 

EE 

<td> 网 友 1</td> 

<td> 很 好 </td> 

</tr> 

<tr height="100"> 

<td> 网 友 2</td> 

<td>“ 很 好 ”! 我 选择 的 是 自助 游 ， 北 京 的 历史 和 悠久， 古代 建筑 和 雄伟 的 现代 建筑 很 多 ， 有 些小 街 
巷 也 值得 细 细 品味 ， 各 种 博物 馆 也 值得 一 看 。 是 一 个 值得 你 来 游玩 的 地 方 。</td> 

</tr> 

</table> 

</body> 

</html> 


运行 代码 后 ,效果 如 图 9-11 所 示 。 图 中 表格 的 第 3 行 高 度 变 成 为 100 像素 ,而 其 他 两 
行 仍 是 默认 值 。 


ls 
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设置 表格 某 一 行 的 高 度 一 


很 好 


“很 好 ”| 我 选择 的 是 自助 游 ， 北 京 的 历史 悠久 ， 古 发 建筑 ， 和 
唯 伟 的 现代 建筑 很 多 ， 有 些小 街 巷 也 值得 细 细 品味 ， | 
也 值得 一 看 。 是 一 个 值 的 你 来 游玩 的 地 方 。 


图 9-11 设置 表格 某 一 行 高 度 的 效果 


9.3.2 设置 表格 的 行 背景 颜色 一 一 bgcolor 


除了 可 以 设置 整个 表格 的 背景 外 ， 还 可 以 单独 对 某 一 行进 行 背景 颜色 


起 到 对 某 一 行 的 强调 效果 。 其 语法 为 : 
<tr bgcolor=" 背 景 颜色 "> 


实例 9-11: 设置 表格 的 行 背 景 颜色 
<html> 

<head> 
<title> 设 置 表格 行 背景 </title> 
</head> 

<body> 

<h3> 添 加 行 背景 颜色 </h3> 


<table border="2" bordercolor="grey" width="400" height="200" > 


<tr bgcolor="red"> 
<th> 姓 名 </th> 
<th> 性 别 </th> 
<th> 年 龄 </th> 
<th> 职 务 </th> 


EE 
<Er> 


<td> 张 三 </td> 


<td> 男 </td> 
<td>30</td> 


<tqd> 工 程 师 </td> 


< /EES 
> 


"人 


设置 ， 


这 样 可 以 
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<td> 李 四 </td> 

<td> 女 </td> 
<td>25</td> 

<td> 助 理工 程 师 </td> 
区/ 

</table> 

</body> 

</html> 


运行 代码 后 ， 可 以 看 到 表格 的 第 1 行 添加 了 背景 颜色 ， 效 果 如 图 9-12 所 示 。 


设置 表格 行 背景 - Windows Internet Explorer E 器/ 区 
EAI pl- 
文件 中 ) ”编辑 了 ) 查看 W) 收 若 天 WA) 工具 fT) 帮助 00 x 三 saasrt 加 
宽 收 蕊 严 。| 设置 表格 行 背 最 各 -加 本 到 I 面 m、 安全 5) 工具 0)- 二- ” 
添加 行 背 景 颜色 
联 三 男 30 工程 师 
地 四 女 25 助理 工程 师 

6 人 RET 


9.3.3 设置 表格 的 行 边框 颜色 一 一 bordercolor 


为 了 突显 数据 的 内 容 ， 同 设置 表格 行 的 背景 颜色 效果 相似 ， 用 户 还 可 以 单独 为 某 一 行 
设置 边框 的 颜色 。 其 语法 如 下 : 


<tr borqdercolor=" 背 景 颜色 "> 


实例 9-12: 设置 表格 的 行 边框 颜色 


<html> 

<head> 

<title> 设 置 表格 行 边框 的 颜色 </title> 
</head> 

<body> 


<h3> 添 加 行 边框 颜色 </h3> 

<table border="2" bordercolor="grey" width="400" height="200" > 
<tr> 

<th> 姓 名 </th> 

<th> 数 学 </th> 


se 
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<th> 语 文 </th> 
<th> 外 语 </th> 

< /EE 

E> 

<td> 学 员 1</td> 
<td>80</td> 
<td>96</td> 
<td>78</td> 
</tr> 

<tr bordercolor="red"> 
<td> 学 员 2</td> 
<td>90</td> 
<td>99</td> 
<td>96</td> 
</tr> 
</table> 
</body> 
</html> 


运行 代码 后 ， 可 以 看 到 表格 的 第 2 行 边框 变 成 了 红色 ， 效 果 如 图 9-13 所 示 。 


谱 置 表 阁 行 边框 的 丙 色 - Windows Internet Explorer 
人 全 ”cveeot msoneWinint 国 [S|[x| [5 万 
文件 ) 饮 错 四 查看 0Y) 收藏 丈 以 工具 IJ) 帮助 0 x sme 图 加 


华电 球 严 。 世 设置 表格 行 过 枢 的 颜色 租 - 园 - 噩 吨 -页 面 9- 安全 8)- I 具 0)- 网 - ” 


漆 加 行 边框 颜色 


图 9-13 为 某 一 行 设置 边框 的 颜色 


9.3.4 行文 字 的 水 平 对 齐 方式 


为 了 表格 的 美观 、 协 调和 统一 ， 在 表格 的 每 一 行 都 可 以 设置 行文 字 的 对 齐 方式 。 通 过 
“align” 属 性 来 设置 相应 的 对 齐 方 式 。 其 语法 为 : 


<tr align=" 行 文字 的 对 齐 方式 "> 
对 齐 方式 属性 值 如 表 9-2 所 示 : 


align 


和 证 
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表 9-2 对齐 方式 属性 值 


属性 值 在 行 中 文字 的 对 齐 效果 
left 靠 左 对 齐 
right 靠 右 对 齐 
center 居中 对 齐 


实例 9-13: 设置 行文 字 的 水 平 对 齐 方 式 


<html> 

<head> 

<title> 设 置 行文 字 的 水 平 对 齐 方 式 </title> 

</head> 

<body> 

<h3> 深 圳 市 简介 </h3> 

<table border="2" bordercolor="grey" width="400" cellpadding="10"> 

<tr align="left"> 

<td> 地 理 位 置 </td> 

<td> 深 圳 市 位 于 祖国 的 南 疆 ， 广 东 省 南部 ， 毗 邻 香港 。 陆 域 位 置 是 东经 113”46'~114”37'， 
北纬 22”27' 一 22”52'。 东 临 大 亚 湾 与 惠州 市 相连 ， 西 至 珠江 口 伶 人 洋 与 中 山 市 、 珠 海 市 相 
望 ， 南 至 深圳 河 与 香港 毗邻 ， 北 与 东莞 市 、 惠 州 市 接壤 。</td> 

</tr> 

<tr align="center"> 

<tqd> 气 候 状况 </td> 

<td> 深 圳 属 亚热带 海洋 性 气候 区 ， 气 候 温和 ， 阳 光 充 沛 。 夏 季 长 达 6 个 月 。 春 秋冬 三 季 气 候 温暖 。 
年 平均 气温 为 23 .7'C， 最 高 气温 为 36. 6C， 最 低 气温 为 1.4C, 无 霜 期 为 355 天 。 年 日 照 时 
数 1975 .0 个 小 时 ， 年 平均 降雨 量 为 1608 .1 毫米 。 夏 秋 两 季 偶 有 人 台风 。</td> 

</tr> 

<tr align="right"> 

<td> 土 地 特产 </td> 

<td> 经 重新 勘测 ， 深 圳 市 总 面积 为 1952 . 84 平方 公里 ， 略 少 于 原来 统计 的 2020 平方 公里 。 其 中 ， 
深圳 经 济 特区 面积 为 395. 81 平方 公里 。 土 地 利用 已 从 农村 形态 转 为 大 城市 一 一 郊区 形态 。 盛 
产 荔枝 等 名 果 ， 矿 产 主要 为 花岗岩 、 大 理 石 等 建材 ， 金 属 矿 产 可 开采 量 较 小 ， 油 、 气 等 能 源 完 
全 靠 外 界 输 入 。</td> 


</tr> 


</table> 

</body> 

</html> 

运行 代码 后 ， 效 果 如 图 9-14 所 示 。 其 中 ， 表格 的 第 1 行 中 文字 靠 左 对 齐 ; 第 2 行文 字 
居中 对 齐 ; 第 3 行文 字 靠 右 对 齐 。 
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行文 宇 的 水 手 对 齐 方式 - Windows 


Internet Explorer 


| 忆 ] C:\Documents and Settingswd 池村 X | 让 SE 


文件 @) 蝙 辑 正 ) 查看 W) 收 疗 严 O) 工具 CA) 帮助 00 x 


smart [= 
请 收藏 天 。 | 欧 设置 行文 的 水 平 对 | 名 罩 


深圳 市 简介 


可 训 ”页 面 m) 。 安 全 6) -工具 D) - 


| 地 | 深圳 市 位 于 祖国 的 南 疆 ， 广 东 省 南部 ， 紫 邻 香港 。 陆 域 位 置 是 东经 113。 
| 46' 一 114”37  ， 北 纬 22”27 一 22” 52' 。 东 临 大 亚 洁 与 惠州 市 相连 ， 西 至 
环 上 从 人 汪汪 中 由 市、 于 市 相 时， 南 到 深圳 河 与 让 促 ， 北 与 东 守 


ee 气候 温和 ， 阳 光 充沛 。 夏 季 长 达 6 个 月 。 春 秋 

冬 三 季 气 1 年 平均 气温 为 23.7C， 景 高 气 瘟 为 36.6CC， 景 低 气 温 为 

1.4C, i 年 日 照 时 数 1975. 0 个 小 时 ， 年 平均 降雨 量 为 1608. 1 
吉米。 夏秋 两 竹 偶 有 台风 。 


经 重新 勘测 ， 深 圳 市 总 面积 为 1952. 84 平 方 公里 ， 略 少 于 原来 统计 的 2020 平 

方 公里 。 其 中 ， 深圳 经 济 特区 面积 为 395. 81 平 方 公里 。 土 地 利用 已 从 农村 

形态 转 为 大 城市 一 一 郊区 形态 。 盛 产 动 枝 等 名 果 ， 太 产 主要 为 花岗岩 、 大 理 
石 等 建材 ， 金 属 矿产 可 开采 量 较 小 ， 油 、 气 等 能 源 完全 靠 外 界 输入 ， 


Er a 


ET 


图 9-14 设置 行文 字 的 水 平 对 齐 方式 


9.3.5 ”行文 字 的 垂直 对 齐 方 


垂直 对 齐 是 一 种 特殊 的 对 齐 方式 。 对 齐 方式 的 属性 值 如 表 9-3 所 示 : 


表 9-3 对齐 方式 的 属性 值 
属性 值 


在 行 中 文字 的 对 齐 效果 
to 顶端 对 齐 
bottom 底部 对 齐 
middle 居中 对 齐 
其 语法 为 : 


<tr valign=" 行 文字 的 对 齐 方式 "> 
实例 9-14: 设置 行文 字 的 垂直 对 齐 方式 


<html> 

<head> 

<title> 设 置 行文 字 的 垂直 对 齐 方式 </title> 
</head> 

<body> 

<h3> 深 圳 市 城市 信息 </h3> 


<table border="2" bordercolor="grey" width="400" cellpadding="10"> 
<tr height="100" valign="top"> 


<td> 地 标 </td> 
<tq> 地 王 大 厦 、 邓 小 平 画像 、 世 界 之 窗 、 赛 格 大 厦 、 深 圳 上 海 宾馆 </td> 
< 


“bas 
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<tr height="100" valign="middle"> 

<td> 海 拔 </td> 

<td> 全 市 平均 海拔 70 至 120 米 。 梧 桐 山 为 深圳 市 最 高 点 ， 海 拔 943 .7 米 </td> 

</tr> 

<tr height="100" valign="bottom"> 

<td> 民 族 </td> 

<td> 深 圳 是 继 北京 之 后 全 国 第 二 个 聚 齐全 国 56 个 民族 的 大 城市 。 深 圳 市 有 少数 民族 人 口 36 万 多 
人 </td> 

</tr> 

</table> 

</body> 

</html> 


运行 代码 后 ， 效 果 如 图 9-15 所 示 。 其 中 ， 表 格 的 第 1 行 中 文字 靠 顶端 对 齐 ; 第 2 行文 
字 居 中 对 齐 ; 第 3 行文 字 靠 底部 对 齐 。 


设置 行文 宇 的 甜 直 对 齐 方式 - Windows Internet Explorer 
GO IE) C:\Documents and Settingswd WW $9  X 上 
文件 人 F) 编辑 下 ) 查看 WV) 收 夸 天 工具 0T) 帮助 00 x 名 smat 图 匡 


次 收藏 天 。。 态 设 置 行文 字 的 看 直 对 租 - 国 口 岗 -页面 P)- 安全 6)- 工具 0)， 


深圳 市 城市 信息 


地 王 大 厦 、 人 世界 之 窗 、 赛 格 大 
厦 、 深 圳 上 : 


St 梧桐 山 为 深圳 市 最 
高 点 ， 海 拔 945. 7 米 


| 民 | 深圳 是 继 北京 之 后 全 国 第 二 个 聚 齐全 国 56 个 民 
| 族 族 的 大 城市 。 深圳 市 有 少数 民族 人 口 36 万 多 人 | 


图 9-15 ”设置 行文 字 的 垂直 对 齐 方式 


9.4 表格 的 单元 格 属性 


表格 中 数据 的 编辑 与 修饰 都 集中 在 每 一 个 单元 格 中 ， 单 元 格 是 表格 中 很 重要 的 一 个 元 
素 ， 通 过 格式 化 来 设置 单元 格 中 的 内 容 ， 使 得 表格 能 呈现 出 更 好 的 效果 。 


9.4.1 ”添加 表格 的 标题 单元 格 一 一 <caption> 


有 一 种 特殊 的 单元 格 叫做 标题 单元 格 ， 它 位 于 整个 表格 的 第 一 行 。 标 题 单 元 格 是 没有 
边框 的 。 通 过 <caption> 标 签 来 设置 表格 的 标题 ， 它 是 双 标 签 。 其 语法 为 


和 
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<caption> 表 格 的 标题 </caption> 
实例 9-15: 添加 表格 的 标题 


<html> 

<head> 

<title> 添 加 表格 的 标题 </title> 

</head> 

<body> 

<h3> 添 加 了 标题 单元 格 的 表格 </h3> 

<table border="2" bordercolor="grey"> 

<caption> 受 殊 浣溪沙 </caption> 

<tr> 

<td> 一 曲 新 词 酒 一 杯 ，</td> 

<td> 去 年 天 气 旧 亭 台 。</td> 

</tr> 

> 中 中 

<td> 夕 阳 西 下 几时 回 ? </td> 

<td> 无 可 奈何 花 落 去 ，</td> 

</tr> 

SE 

<tqd> 似 曾 相 识 燕 归 来 ，</tq> 

<tq> 小 园 香 径 独 徘徊 。</td> 

</tr> 

</table> 

</body> 

</html> 

运行 代码 后 ， 可 以 看 到 在 表格 的 上 方 添加 了 一 个 没有 边框 的 标题 单元 格 ， 而 且 默认 情 
况 下 标题 是 居中 显示 的 ， 效 果 如 图 9-16 所 示 。 

添加 表格 的 标题 - Windows Internet Explorer 


ED [Bc:\Docments sma slss||X| | BE je 


文件 PF) ”编辑 灾 ) 查看 YW) 收藏 夹 科 工具 CD) 帮助 C ”| x 各 smert 图 好 


| 宽 收 诚 天 。 | 芒 添 加 表格 的 标题 盘 - 加 -局 品 -。 To 
添加 了 标题 单元 格 的 表格 
曼殊 尝 溪 沙 
一 曲 新 词 酒 一 杯 ，|| 去 年 天 气 | 旧 亭 台 。 
夕阳 西 下 几时 回 ? | 无 可 奈何 花 落 去 ， 
羽 曾 相识 燕 归 来 ，] 小 园 香 径 独 徘 惫 。| 


图 9-16 添加 了 标题 单元 格 的 表格 


ws 
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了 默认 情况 下 ， 标 题 是 居中 显示 的 。 用 户 还 可 以 通过 “align” 属 性 来 设置 其 水 平 对 
齐 方式 ， 通 过 “valign” 属 性 来 设置 其 垂直 对 齐 方式 。 水 平 对 齐 方式 与 其 他 行 的 
设置 相同 ， 不 再 重复 叙述 。 在 使 用 “valign” 属 性 设置 时 ， 它 的 两 个 属性 值 “top” 
和 “bottom” 分 别 表示 标题 的 位 置 位 于 表格 的 上 方 和 下 方 。 


9.4.2 ”设置 单元 格 大 小 一 一 width、height 


除了 设置 整个 表格 的 大 小 外 ， 还 可 以 对 单元 格 的 大 小 进行 单独 调整 。 通 过 “width” 和 
“height” 属 性 进行 设置 。 其 语法 为 : 


<td width=" 单 元 格 的 宽度 "height=" 单 元 格 的 高 度 ”> 


实例 9-16: 设置 单元 格 大 小 


<html> 

<head> 

<title> 设 置 单元 格 大 小 </title> 
</head> 

<body> 

<table border="2" bordercolor="red"> 
<caption> 通 讯 录 </caption> 

5 可 小 

<th> 姓 名 </th> 

<th> 地 址 </th> 

<th> 通 讯 方式 </th> 

<th> 电 子 邮 件 </th> 

</tr> 

Er 

<td> 张 三 </td> 

<td> 北 京 </td> 

<td>123456789</td> 
<td>123Q123 . com</td> 

EE 

Er 

<td> 李 四 </td> 

<tqd width="100"> 上 海 </td> 
<td>987654321</td> 

<td height="100">321@321.com</td> 
</tr> 

<td width="100" height="100"> 王 五 </td> 
<td> 南 京 </td> 

<td>123123123</td> 
<td>567@567 . com</td> 

< 


a 
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</table> 
</body> 
</html> 
运行 代码 后 效果 如 图 9-17 所 示 。 
设置 单元 格 大 小 - Windows In 回 ] 
富国 Cvs wd settineswbinistrater\ 面 避 | 好 | 六 | | 万 下 Dl- 
文件 中 ) ”编辑 下) 查看 W) 收 套 夫人 工具 0) 帮助 00 X snlt [= 
高 收 阅 丈 | 夺 设置 单元 格 大 小 从 -上 国 - 品 I 上 om- +- ”| 
通讯 录 
姓名 地 址 ”| 通 电子 邮件 
二 京 123456789|1238123. com 
舒 四 上 海 |987654321|3218321. com 
| 焉 五 南京 123123123|5678567. com 
起 卫生 的 电脑 EECTE 
图 9-17 添加 了 标题 单元 格 的 表格 


[9 当 某 个 单元 格 设置 宽度 后 ， 虽 然 整 列 的 其 他 单元 格 没 有 进行 设置 ， 但 整 列 的 宽度 
也 将 发 生变 化 ; 同样 当 某 个 单元 格 设置 高 度 后 ， 整 行 的 高 度 也 将 发 生变 化 。 


9.4.3 ”设置 单元 格 的 背景 颜色 一 一 bgcolor 


实际 上 单元 格 属性 的 设置 和 表格 属性 的 设置 基本 相同 ， 需 要 注意 的 是 如 果 用 户 为 某 一 
个 单元 格 设置 了 属性 ， 那 么 表格 属性 将 在 这 个 单元 格 里 无 效 。 例 如 ， 已 经 设置 了 表格 的 背 
景色 ， 但 同时 又 设置 了 某 单元 格 的 背景 色 ， 那 么 单元 格 背 景色 将 覆盖 表格 的 背景 色 。 其 语 
法 如 下 : 


<td bgcolor=" 单 元 格 背 景色 "> 


实例 9-17: 设置 单元 格 的 背景 颜色 


<html> 

<head> 

<tit1le> 设 置 单元 格 的 背景 颜色 </title> 

</head> 

<body> 

<table border="2" width="400" height="200" bgcolor="red"> 
Er> 
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<th> 姓 名 </th> 

<th> 性 别 </th> 

<th> 年 龄 </th> 

<th> 职 务 </th> 

<x/EES> 

<tr> 

<td bgcolor="yellow"> 张 三 </td> 
<td bgcolor="red"> 男 </td> 

<td bgcolor="blue">30</td> 
<td bgcolor="grey"> 工 程 师 </td> 
</tr> 

<EE> 

<td bgcolor="grey"> 李 四 </td> 
<td bgcolor="blue"> 女 </td> 

<td bgcolor="yellow">25</td> 
<td bgcolor="red"> 助 理工 程 师 </td> 
</EE> 

</table> 

</body> 

</html> 


运行 代码 后 效果 如 图 9-18 所 示 。 


设置 单元 格 的 背景 颜色 


Windows Intern 
B) Ci\Docments md S Wty X 

文件 四) 

请 收 评 天 。 葬 设置 单元 格 的 背景 颜色 


编辑 正 ) 查看 (Y) 收藏 夹 ) 工具 (T) 


添加 表格 


局 回 ] 民 
pil- 
名 smart 图 外 


et Explorer 


帮助 ”x 


3 各 ”页 面 D) 


图 9-18 


起 旦 


9.4.4 背景 


设置 单元 格 的 
不 同 于 表格 的 行 背景 设置 ， 单 元 格 的 背景 


设置 单元 格 的 


茹 昌 : 
月 时 


颜色 


图 像 一 一 background 


6 
日 导 


以 设置 为 图 像 。 方 法 与 表格 的 背景 图 像 设 


置 相 同 。 背 景 图 像 的 路 径 可 以 为 相对 路 径 ， 也 可 


上 月 孙 
<td background=" 图 像 文件 所 在 的 路 径 "> 


实例 9-18: 设置 单元 格 的 背景 图 像 


起 时 
日 慰 


以 为 绝对 路 径 。 其 语法 如 下 : 
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<html> 

<head> 

<title> 设 置 单 元 格 的 背景 图 像 </title> 

</head> 

<body> 

<table border="2" bordercolor="grey" width="600" height="300" > 
<caption> 陈 妆 青松 </caption> 

<tq> 大 雪 压 青松 ，</tq> 

<td> 青 松手 是 直 。</tq> 

</Er> 

<tr> 

<td background=" 迎 客 松 .jpg"> 要 知 松 高 洁 ，</td> 
<td bgcolor="yellow"> 待 到 雪 化 时 。</td> 

</tr> 

</table> 

</body> 

</html> 


运行 代码 后 , 可 以 看 到 单元 格 中 分 别 添加 了 背景 颜色 和 背景 图 像 ,效果 如 图 9-19 所 示 。 


设置 单元 格 的 背景 图 多 he 
文件 四 轴 稀 人 @) 查看 如 收 庆 天 的 工具 GD) 帮助 0) 
GO [Bruma-ursI msn Xx 


宽容 名 设置 间 元 格 的 诊 景 图像 全 "四 凡 - DD 全 IAW- 


陈毅 青松 


图 9-19 设置 单元 格 的 背景 图 像 


4 菜 个 单元 格 同时 设置 背景 颜色 和 背景 图 像 时 ， 只 显示 背景 图 像 。 


9.4.5 ”设置 单元 格 的 边框 颜色 一 一 bordercolor 


除了 设置 表格 的 边框 及 行 边框 颜色 外 ， 还 可 以 对 单元 格 边框 的 颜色 进行 单独 设置 。 边 
框 是 立体 框 线 ， 所 以 包含 三 个 属性 ， 如 表 9-4 所 示 : 


“bs 
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表 9-4 边框 属性 值 


属性 值 所 作用 的 边框 
bordercolor 上 、 下 、 左 、 右 边框 的 颜色 
bordercolorlight 左 和 上 边框 〈 亮 面 ) 的 颜色 
bordercolordark 右 和 下 边框 ( 暗 面 〉 的 颜色 
其 语法 为 : 


<td bordercolor=" 边 框 颜色 代码 "> 
<td bordercolorlight=" 边 框 颜色 代码 "> 
<td bordercolordark=" 边 框 颜色 代码 "> 


实例 9-19: 设置 单元 格 的 边框 颜色 


<html> 

<head> 

<title> 设 置 单 元 格 的 边框 颜色 </title> 
</head> 

<body> 

<h3> 设 置 单 元 格 边框 颜色 </h3> 

<table border="2" width=400> 
<caption> 设 备 使 用 情况 </caption> 
直下 

<th> 物 品 </th> 

<th> 型 号 </th> 

<th> 数 量 </th> 

<th> 负 责 人 </th> 

</tr> 

Ca 中 中 

<td bordercolor="blue"> 计 算 机 </td> 
<td> 联 想 </td> 

<td>2</td> 

<td bordercolor="blue"> 张 三 </td> 
<AEES 

> 

<td bordercolor="red"> 照 相机 </td> 
<td> 佳 能 </td> 

<td>1</td> 

<td bordercolor="red"> 李 四 </td> 
</tr> 

</table> 

<h3> 设 置 单元 格 的 亮 边 框 和 上 暗 边 框 </h3> 
<table border="2" width=400> 
<caption> 设 备 使 用 情况 </caption> 
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<tr 

<th> 物 品 </th> 

<th> 型 号 </th> 

<th> 数 量 </th> 

<th> 负 责 人 </th> 

/Ex> 

<tr> 

<td bordercolorlight="#006600" bordercolordark="#660066"> 计 算 机 </td> 
<td> 联 想 </td> 
<td>2</td> 
<td bordercolorlight="#dd00dd" bordercolordark="#666600"> 张 三 </td> 
</tr> 

xt 
<td> 照 相机 </td> 
<td bordercolorlight="#000066" bordercolordark="#dd0000"> 佳 能 </td> 
<td>1</td> 
<td bordercolorlight="#000066" bordercolordark="#dd0000"> 李 四 </td> 
</tr> 

</table> 

</body> 

</html> 


运行 代码 后 效果 如 图 9-20 所 示 。 


识 置 单元 格 的 边框 颜色 - Windowe Internet Explorer 


闻 c pements ma :| x | [5 12 
文件 中 况 错 于 ) 查看 W) 收 诚 天 W) 工具 帮助 0 Xx 各 smet 图 加 
二 收藏 天 。 | 同 设 时 单元 格 的 边民 荐 色 葵 - 回 -局 师 ” 页面 中 
设置 单元 格 边 框 颜色 
设备 使 用 情况 
物品 型 号 数量 负责 人 | 
计算 机 | 联想 2 = 
三 得 机 佳能 1 鞭 四 
设置 单元 格 的 亮 边 框 和 暗 边框 
设备 使 用 情况 
物品 型 号 数量 负责 人 
计算 机 联想 2 隆 三 
照相 机 巷 能 1 摩 四 
寺 或 EE PENT 


图 9-20 添加 单元 格 的 边框 颜色 


9.4.6 ”表格 的 行 合并 属性 一 一 rowspan 


在 制作 一 些 复杂 的 表格 时 ， 需 要 用 到 单元 格 合 并 ， 用户 用 “rowspan” 属 性 来 设置 。 其 
语法 如 下 : 


<td rowspan=" 需 要 合并 的 行 数 "> 
实例 9-20: 将 表格 的 进行 合并 


= 
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<html> 

<head> 

<title> 表 格 的 行 合 并 </title> 
</head> 

<body> 

<table border="2" bordercolor="red"> 
<caption> 招 生 目 录 </caption> 
<tr> 

<tqd width="100"> 学 科 专 业 </tqd> 
<tq width="200"> 考 试 科目 </td> 
</tr> 

正之 

<td rowspan=3> 基 础 数学 </td> 
<td> 思 想 政治 理论 </td> 

</tr> 

<tr> 

<tqd> 英 语 一 </td> 

</tr> 

<tr> 

<td> 高 等 代数 </td> 

</tr> 

<tr> 

<td rowspan=2> 指 导 老师 </td> 
<td> 老 师 1</td> 

</tr> 

EE 

<td> 老 师 2</td> 

</tr> 

</table> 

</body> 

</html> 


从 上 述 代 码 中 可 以 看 出 ，“rowspan” 属 性 设置 的 是 需要 合并 的 行 数 。 运 行 代码 后 ， 效 
果 如 图 9-21 所 示 。 


去 格 的 行 合并 - Windows Internet Explorer 所 区 
GO Bev ml] 
文件 @) 编 各 下 ) 查看 W) 收 豪 天 W) 工具 0) 必 助 | ” x 


寅 收 训 天 。 荐 表格 的 行人 并 | 价 ” 加- 
招生 目录 
党 科 专 业 唐 坛 科目 
思想 政治 理论 
基础 数学 诬 语 一 
高 等 代数 
过 ,了 
指导 老师 所 
3 ET 本 -二 Im 


图 9-21 将 表格 的 行进 行 合并 的 效果 


< 
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9.4.7 ”表格 的 列 合 并 属性 一 一 colspan 

除了 能 将 表格 的 行 合并 外 ， 还 可 以 将 各 列 进行 合并 ， 也 就 是 说 可 以 将 多 个 单元 格 合并 
成 一 个 。 其 语法 如 下 : 

<td colspan=" 需 要 合并 的 列 数 "> 

实例 9-21: 将 表格 的 列 进行 合并 


<html> 

<head> 
<title> 表 格 的 列 合并 </title> 
</head> 

<body> 

<table border="2" bordercolor="grey"> 
<caption> 某 学 校 的 课程 学 习 安 排 </caption> 
<tr> 

<td width="400" bgcolor="red" align="center" colspan="4"> 课 程 表 </td> 
</tr> 

<Er> 

<td> 星 期 一 </td> 
<td> 外 语 </td> 

<td> 计 算 机 </td> 
<td> 实 作 </td> 

</tr> 

A 

<td> 星 期 二 </td> 
<td> 专 业 课 </td> 

<td> 语 言 </td> 
<td> 实 作 </td> 

</tr> 

> 

<td> 星 期 三 </td> 
<td> 计 算 机 </td> 
<td> 实 作 </td> 
<td> 外 语 </td> 

EE 

</table> 

</body> 

</html> 


从 上 述 代码 中 可 以 看 出 ，“colspan” 属 性 设置 的 是 需要 合并 的 列 数 。 运 行 代码 后 ， 效 
果 如 图 9-22 所 示 。 


i 
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去 格 的 列 合并 一 


llE 


ET ET 
襄 ks 本 二 | 高 加 于 网 。 情 ] 玫 取 更 多 玫 加 析 雪 - 


Be 从 "和 目 名 六- -9- 
某 学 术 的 译 程 学 习 安排 
一] 外语 计算 机 | 诡 诈 
[WE TV 语言 E 
ER RE 人 
3 7 本、 矶 1008 


图 9-22 将 表格 的 列 进行 合并 的 效果 


9.4.8 单元 格 文字 对 齐 方式 


单元 格 的 文字 对 齐 方式 “align” 和 “valign” 属 性 设置 与 行 对 齐 方式 基本 相同 。 其 语 
法 如 下 : 


<td align=" 水 平 对 齐 方式 ” valign=" 垂 直 对 齐 方式 "> 


实例 9-22: 设置 单元 格 文字 对 齐 方式 


<html> 

<head> 

<title> 设 置 单元 格 文字 对 齐 方式 </title> 
</head> 

<body> 


<table border="2" bordercolor="red" width="400"> 
<caption> 通 讯 录 </caption> 

= 中字 < 

<th align="center"> 姓 名 </th> 

<th align="center"> 地 址 </th> 

<th align="center"> 通 讯 方 式 </th> 

<th align="center"> 电 子 邮件 </th> 


</tr> 

EA 

<td> 张 三 </td> 

<tqd align="left"> 北 京 </td> 


<td align="right">123456789</td> 
<td>123@123.com</td> 

</tr> 

> 


-Ll3Lls 


HTML/CSS 网 页 设计 与 开发 一 站 式 学 习 一 一 难点 /案例 /练习 


<td align="right"> 李 四 </td> 
<td align="right"> 上 海 </td> 


<td>987654321</td> 
<td height="100" align="right" valign="bottom">321@321.com</td> 
<ALr> 


<td align="right"> 王 五 </td> 

<td height="100" valign="top"> 南 京 </td> 
<td>123123123</td> 
<td>567@567.com</td> 

/E> 

</table> 

</body> 

</html> 


从 上 述 代码 中 看 出 ， 可 以 单独 对 某 一 个 单元 格 的 对 齐 方式 进行 设置 。 运 行 代码 后 ， 效 
果 如 图 9-23 所 示 。 


设置 单元 格 对 齐 方式 - Windows Internet Explorer 
全 已- 天 cocments md sett Sts xX) [万 
文件 F) 编辑 全) 查看 VW) 收 基 『 严 必 ) 工具 GD) 帮助 00 x 二 sgt 转台 
宽 收藏 天 。 葬 设 告 单 元 格 对 齐 方式 从 - 园 - 口 咒 ”W 面 D- 安全 6)- 


通讯 录 
地 址 | 通讯 方式 电子 邮件 
[ 京 123456789||1238123. com 


987654321 


3216321. com| 


123123123 5678567. com 


图 9-23 ”单元 格 文字 的 对 齐 方式 效果 


在 没有 设置 表格 或 单元 格 的 宽度 时 ， 默 认 表 格 的 宽度 会 根据 文字 内 容 进行 调整 。 单 元 
格 中 文字 较 多 时 ， 会 自动 换行 ， 但 表格 的 宽度 始终 在 浏览 器 中 呈现 。 如 果 不 需要 单元 格 中 
的 文字 自动 换行 ， 可 以 通过 “nowrap” 属 性 来 设置 。 其 语法 如 下 : 


a 


<th nowrap> 


<td nowrap> 
实例 9-23: 设置 单元 格 文字 不 自动 换行 


<html> 
<head> 


<title> 设 置 单元 格 文字 不 自动 换行 </title> 


和 
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</head> 

<body> 

<table border="2" bordercolor="grey" cellpadding="10"> 

<caption> 深 圳 城市 信息 </caption> 

<tr> 

<td> 地 标 </td> 

<td> 地 王 大 厦 、 邓 人 小平 画像 、 世 界 之 窗 、 赛 格 大 厦 、 深 圳 上 海 宾馆 </td> 

</tr> 

E> 

<td> 海 拔 </td> 

<td> 全 市 平均 海拔 70 至 120 米 。 梧 桐 山 为 深圳 市 最 高 点 ， 海 拔 943 .7 米 </td> 

</tr> 

4 

<td> 民 族 </td> 

<td> 深 圳 是 继 北 京 之 后 全 国 第 二 个 聚 齐全 国 56 个 民族 的 大 城市 。 深 圳 市 有 少数 民族 人 口 36 万 多 
人 </td> 

</tr> 

</table>< 

br> 

<table border="2" bordercolor="grey" cellpadding="10"> 

EP 

<td> 地 标 </td> 

<td nowrap > 地 王 大 厦 、 邓 人 小平 画像 、 世 界 之 窗 、 赛 格 大 厦 、 深 圳 上 海 宾馆 </td> 

</tr> 

Er 

<td> 海 拔 </td> 

<td nowrap > 全 市 平均 海拔 70 至 120 米 。 梧 桐 山 为 深圳 市 最 高 点 ， 海 拔 943.7 米 </td> 

</tr> 

天 在下 六 

<td> 民 族 </td> 

<td> 深 圳 是 继 北京 之 后 全 国 第 二 个 聚 齐全 国 56 个 民族 的 大 城市 。 深 圳 市 有 少数 民族 人 口 36 万 多 
人 </td> 

</tr> 

</table> 

</body> 

</html> 


运行 代码 后 ， 效 果 如 图 9-24 所 示 。 从 图 中 可 以 看 出 ， 第 一 个 表格 没有 进行 “nowrap” 
属性 的 设置 ， 整 个 表格 在 浏览 器 中 呈现 ， 第 二 个 表格 中 ， 在 设置 了 “nowrap” 属 性 的 单元 
格 中 ， 文 字 将 不 换行 进行 显示 ， 且 表格 的 宽度 将 不 受 浏览 器 控制 ， 超 出 的 部 分 将 通过 浏览 
器 深 动 条 拖 动 进行 显示 。 
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设 轩 单 元 格 文 宇 不 自动 换行 - Windows Internet Ezplorer 
GO cw oI [Pe 

文件 编辑) 查看 W) 收 芒 天 罗 ) ”工具 0) 帮助 ”x 各 smart 图 过 
宣 收 评 天 。 逢 设 置 单元 格 文字 不 自 丛 " 国 - 马 才 -而 )- 


深圳 城市 信息 


大 邓小平 画像 、 世 界 之 窗 、 赛 格 大厦 、 深 圳 上 海 


全 市 平均 海拔 70 至 120 米 。 梧 桐 山 为 深圳 市 最 高 点 ， 海 拔 
943.7 米 


深圳 是 继 北 京 之 后 全 国 第 二 个 聚 齐全 国 56 个 民族 的 大 城 
市 。 深 圳 市 有 少数 民族 人 口 36 万 多 人 


地 王 大 厦 、 邓 小 平 画像 、 世 界 之 窗 、 赛 格 大 厦 、 深 圳 上 海 宾馆 


全 市 平均 海 拔 70 至 120 米 。 梧 桐 山 为 深圳 市 最 高 点 ， 海 拔 943. 7 米 


| 深圳 是 继 北京 之 后 全 国 第 二 个 聚 齐全 国 56 个 民族 的 大 城市 。 深 圳 
市 有 少数 民族 人 口 36 万 多 人 


< > 
元 成 时 我 的 电脑 稚 > 拆 100% > 


图 9-24 设置 单元 格 文字 不 自动 换行 


9.5 表格 的 结构 


ee 都 包括 “head” 和 “body” 两 部 分 。 对 于 用 到 了 很 多 表格 ， 页 面 的 排版 比较 
复杂 的 网 页 ， 表 格 的 结构 也 就 相对 复杂 。 所 以 为 了 明确 表格 的 结构 ， 又 可 以 将 表格 分 成 三 
部 分 : ea 主体 和 表格 尾 ， 分 别 用 <thead>、<tbody> 和 <tfoo 忆 标签 来 设置 ， 它 们 都 是 
双 标签 。 

<thead> 标 签 表 示 表 格 的 头 部 。 可 以 使 用 单独 的 样式 定义 表 头 ， 并 且 在 打印 时 可 以 在 分 
页 的 上 部 打印 表 头 。 

<tbody> 标 签 表 示 表 格 的 主体 。 浏 览 器 显示 表格 时 ， 通 常 是 完全 下 载 表格 后 ， 再 全 部 显 
示 。<tbody> 标 签 的 好 处 就 是 可 以 先 显示 <tbody> 和 </tbody> 之 间 的 内 容 , 所 以 当 表格 很 长 时 ， 
可 以 使 用 <tbody> 标 签 分 段 显 示 , 这 样 就 不 必 等 整个 表格 都 下 载 完 成 后 再 显示 , 这 对 于 使 用 
表格 来 排版 的 设计 人 员 来 说 尤其 重要 。 

<tfoot> 标 签 主要 用 来 放置 表格 标注 之 类 的 说 明文 字 。 


<table> 

<thead> 
EE 
<td> 表 格 头 </td> 
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xtr> 
</thead> 
<tbody> 
EE 和 
<td> 表 体 </td> 
</tr> 
</tbody> 
<tfoot> 
<tr> 
<td> 表 脚 </td> 
</tr> 
</tfoot> 
</table> 


实例 9-24: 设置 表格 的 结构 


<html> 
<head> 
<title> 设 置 表格 的 结构 </title> 
</head> 
<body> 
<table border="2" bordercolor="red" width="600"> 
<caption> 通 讯 录 </caption> 
<thead align="center" cellspacing="10" bgcolor="red"> 
<tr> 
<th> 人 员 序 号 </th> 
<th> 姓 名 </th> 
<th> 通 讯 地 址 </th> 
<th> 手 机 </th> 
</tr> 
</thead> 
<tbody align="center"> 
<tr> 
<td>1</td> 
<td> 张 三 </td> 
<td> 北 京 市 朝阳 区 </td> 
<td>111111111</td> 
</tr> 


E> 
<td>2</td> 
<td> 李 四 </td> 
<td> 北 京 市 海淀 区 </td> 
<td>222222222</td> 
</tr> 


<tr> 
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<td>3</td> 

<td> 王 五 </td> 

<td> 上 海 市 黄浦 区 </td> 

<td>333333333</td> 
</tr> 


<tEE> 
<td>4</td> 
<td> 赵 六 </td> 
<td> 广 州 市 白云 区 </td> 
<td>444444444</td> 
<KEr> 
</tbody> 
<tfoot align="right" bgcolor="yellow"> 
<tr> 
<td colspan="4">XXX 公司 </td> 
</tr> 
</tfoot> 
</table> 
</body> 
</html> 


从 上 述 代码 中 可 以 看 出 ， 可 以 对 <thead>、<tbody> 和 <tfoof> 标 签 进行 统一 的 属性 设置 ， 
其 效果 分 别 作用 到 该 标签 内 所 包含 的 单元 格 中 ， 这 样 省 去 了 逐一 修改 单元 格 属性 的 步骤 。 
运行 代码 后 ， 效 果 如 图 9-25 所 示 。 


设置 表格 的 结构 - Windows Internet Explorer 


Ci\Docwments and Settines\ | t+ | xX | | 上 


文件 中) 编辑) 查看 W) 收藏 丈 ) 工具 0T) 帮助 00 x 多 smert 图 加 


宽 收 茂 天。 着 设置 表格 的 结构 从 加 3 大 ”页 面 FP)。 安全 5) ~ 


通讯 录 


北京 市 朝阳 区 111111111 
北京 市 海淀 区 222222222 
上 海 市 黄浦 区 333333333 
厂 州 市 白云 区 444444444 


图 9-25 添加 表格 结构 后 的 效果 


9.6 表格 的 庶 套 


表格 的 嵌 套 即 一 个 表格 内 部 包含 另 一 个 表格 。 例 如 ， 用 户 经 常 在 论坛 中 见 到 很 多 精美 


和 
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的 帖子 ， 几 乎 都 用 到 了 表格 的 谋 套 技术 。 

那么 ， 为 什么 要 用 表格 的 嵌 套 技术 ? 首先 ， 网 页 在 排版 时 通常 会 在 外 部 有 一 个 表格 控 
制 总 体 布局 。 如 果 这 时 一 些 内 部 排版 的 细节 也 通过 总 表格 来 实现 ， 容 易 引起 行 高 列 宽 等 的 
冲突 ， 给 表格 制作 带 来 困难 。 其 次 , 浏览 器 在 加 载 有 表格 的 网 页 时 ， 如 果 不 使 用 嵌 套 ， 表 
格 又 非常 复杂 ， 则 需要 等 待 浏览 器 将 整个 表格 的 结构 下 载 完毕 后 才能 看 到 ， 无 形 中 浪费 了 
浏览 者 的 时 间 。 所 以 ， 在 页 面 排版 中 通常 使 用 嵌 套 表格 。 

用 表格 来 排版 页 面 的 思路 : 由 总 表格 规划 整体 的 结构 ， 由 髓 套 的 表格 负责 各 个 子 栏目 
的 排版 ， 并 插入 到 表格 的 相应 位 置 ， 这 样 就 可 以 使 页 面 的 各 个 部 分 有 条 不 率 ， 互 不 冲突 ， 
看 上 去 清晰 整洁 。 

其 语法 为 : 


<table> 
<tbody> 
< 
<td> 表 一 </td> 
<table> 
<tbody> 
< 
<td> 表 二 </td> 
</tr> 
</tbody> 
</table> 
</td> 
</tr> 
</tbody> 
</table> 


实例 9-25: 使 用 表格 的 嵌 套 


<html> 

<head> 

<title> 使 用 表格 的 嵌 套 </title> 

</head> 

<body background=" 火 炬 .jpg"> 

<table width="600" border="2" cellspacing="2" cellpadding="2" align="center"> 

A 

<td width="100" height="50"><font face=" 黑 体 "color="#dddd00"size="5"> 网 页 
LOGO</td></font> 

<td colspan="2"> 

<table align="center"> 滚 动 字 幕 </table></td> 

</tr> 

<tr> 

<td height="300"> 

<table width="100" height="300" border="2" align="center" cellpadding="1" 
cellspacing="1"> 
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<tbody align="center"> 
<tr> 

<td> 标 题 栏 </td> 
</tr> 

<tr> 

<td> 标 题 栏 </td> 

< ER 

<tr> 

<td> 标 题 栏 </td> 
< 

< 
<td> 标 题 栏 </td> 
</tr> 

EE 

<td> 标 题 栏 </td> 
</tr> 

<tr> 

<td> 标 题 栏 </td> 
</tr> 

<tr> 
<td> 标 题 栏 </td> 
</tr> 

<tr> 

<td> 标 题 栏 </td> 
</tr> 

<tr> 

<td> 标 题 栏 </td> 
</tr> 

<tr> 

<td height="100"> 内 容 六 </td> 
</tr> 

</tbody> 
</table> 

</td> 

<td width="300"> 
<table width="300" height="300" border="2" cellpadding=" 
<tbody align="center"> 
Er 

<tqd width="300"> 内 容 一 </td> 
EE 

“E> 

<td> 内 容 二 </td> 

</tr> 

</tbody> 

</table> 

</td> 

<td width="150"> 

<table width="150" height="300" border= 


cellspacing="1"> 


cellpadding="1" cellspacing="1" 


全 
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align="center"> 
EE 
<td width="150" height="100"> 内 容 三 </td> 
KE 
< 
<td height="50"> 内 容 四 </td> 
</tr> 
<tr> 
<td height="150"> 内 容 五 </td> 
EE 
</table> 
</td> 
</tr> 
</table> 
</body> 
</html> 


从 上 述 代码 中 可 以 看 出 ， 不 论 是 哪 种 形式 的 嵌 套 ， 理 论 上 翌 套 的 层 可 以 是 无 穷尽 的 ， 
但 现实 中 ， 用 户 会 根据 需要 有 限制 地 使 用 嵌 套 。 运 行 代码 后 ， 效 果 如 图 9-26 所 示 。 


便 用 租 格 的 京 去 


GO” Bw tretor\ 成 而 \ 第 刀 章 \5.26 bal 司 [ol x] [5 ja 
x 外 eat 国 加 
大 ”I 中 - R26) 工具 0 ， 网- ” 


图 9-26 使 用 表格 的 柑 套 


9.7 ”<div> 层 标签 


<div> 是 网 页 中 经 常用 到 的 一 个 标签 ， 它 是 双 标 签 ， 用 于 网 页 的 排版 。“div” 其 实 就 
是 层 的 概念 ， 也 可 以 理解 为 一 个 绝对 区 域 ， 这 一 方面 虽 和 表格 有 较为 相似 的 功能 ， 但 它 能 
将 各 种 元 素 组 成 一 个 区 域 进行 统一 样式 设置 ， 能 实现 较为 复杂 的 排版 效果 。 其 语法 为 : 


<div id=" 值 ” style=" 样 式 ”align=" 对 齐 方 式 "” class=" 应 用 的 样式 "> 


</div> 


a 


<div> 标 签 里 


元 素 的 对 齐 方式 ; 
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的 属性 较 多 ， 其 中 ，“id” 属 性 用 来 标识 层 ; “align” 属 性 用 
“style” 属 性 很 多 ， 主 要 用 来 设置 层 的 起 始 位 置 和 层 的 大 小 


来 设 定 层 中 
等 效果 ， 常 


用 到 的 参数 如 表 9-5 所 示 ， 相 关 参 数 将 在 使 用 CSS 格式 化 网 页 的 章节 中 详细 介绍 ， 在 此 了 
“class” 属 性 则 用 来 设 定 层 应 用 的 样式 ， 通 常 <div> 标 签 与 CSS 样式 表 相 


解 其 作用 即 可 ; 


结合 使 用 ， 使 相关 的 层 中 元 素 组 合成 一 个 块 级 


在 此 不 次 述 。 


表 9-5 常见 参数 及 作用 


区 域 ， 在 后 面 的 CSS 章节 中 进行 具体 学 习 ， 


height 设置 DIV 的 高 度 
width 设置 DIV 的 宽度 
用 于 设置 DIV 的 外 延边 距 ， 后 面 跟 四 个 距离 分 别 为 到 父 容器 的 上 、 下 、 左 、 右 边 的 
距离 
. I 到 父 容 器 左边 框 的 距离 
margin 


margin-bottom 


到 父 容器 右边 框 的 距 
到 父 容 器 上 边框 的 距离 
到 父 容器 下 边框 的 距离 


用 于 设置 DIV 的 内 边 距 ， 需 要 注意 的 是 padding 设置 的 距离 不 包括 在 本 身 的 width 


和 height 内 ， 如 一 个 DIV 的 width 设置 了 100px， 而 padding-left 设置 了 
这 个 DIV 在 页 面 上 显示 的 将 是 150px 宽 。 也 可 以 用 以 下 四 个 属性 来 分 别 
内 边 距 


50px， 那 么 
设置 DIV 的 


padding 大 内 边 距 
右 内 边 距 
上 内 边 距 
adding-bottom 下 内 边 距 
设置 DIV 的 定位 方式 。position 的 属性 中 有 static、fixed、relative、absolute 四 个 属性 。 
常用 relative 和 absolute。 若 指定 为 static 时 , DIV 遵循 HTML 规则 ; 若 指定 为 relative 
position 时 ， 可 以 用 top、left、right、bottom 来 设置 DIV 在 页 面 中 的 偏 移 ， 但 此 时 不 可 使 用 
层 ; 车 指定 为 absolute 时 ， 可 以 用 top、lef、right、bottom 对 DIV 进行 绝对 定位 ; 
若 指 定 为 fixed 时 ， 在 正 7 与 FF 中 DIV 的 位 置 相 对 于 屏 固定 不 变 ， 正 6 中 没有 效果 
Z-index 设置 DIV 的 层 县 顺序 。 用 z-index 属性 时 ，position 必需 要 指定 为 absolute 才 行 
证 指定 DIV 中 文本 的 样式 ， 其 后 可 跟 文本 的 多 个 样式 ， 如 字体 粗细 、 字 体 大 小 、 何 种 
字体 等 
color 设置 文本 颜色 
设置 DIV 的 边框 样式 。 后跟 边框 的 样式 、 宽 度 、 颜 色 等 属性 。 四 个 边框 可 以 同时 进 
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〈 续 表 ) 
参数 作用 
设置 DIV 的 背景 样式 ，background 后 可 直接 跟 背 景 的 颜色 、 背 景 图 片 、 平 铺 方式 等 
background 
样式 
display 设置 显示 属性 ， 其 值 有 block、none 
float 设置 DIV 在 页 面 上 的 流向 


实例 9-26: 使 用 层 标签 排版 网 页 


<html> 

<head> 

<title> 使 用 层 标签 </title> 

</head> 

<body> 

<h3><font face=" 黑 体 " size="4">Word 无 法 启动 转换 器 mswrd632 .wpc 详解 </font></h3> 

<div id=a align=left> 

<img src="cengl.jpg" width=700 height=300> 

</div> 

<div id=b style="position:absolute;top:80pt;left:50pt;z-index:2; 

width:60%; height:200; text-align: left; vertical-align: middle; 

padding: 9px 10px Opx 10px; 

font-size: 16px; float: left; 

border-right: lpx #DDDDDD solid; 

border-top: lpx #DDDDDD solid; 

border-bottom:1lpx #DDDDDD solid; 

border-left:1px #DDDDDD solid;"><p>gnbsp; gnbsp; &nbsp; &nbsp; 方 法 一 : 一 直 点 
“word 无 法 启动 转换 器 mswrd632 wpc” 下 面 的 “确定 ”， 它 会 出 现 文本 内 容 ， 然 后 在 “ 文 
件 ” 菜 单 中 选 “ 另 存 为 ”， 再 打开 文件 就 正常 了 。 

</p>&gnbsp; gnbsp; gnbsp; gnbsp; 方 法 二 : 点 击 “ 开 始 ”， 输入 “regedit” 指 令 ， 然后“ 确 
定 ”， 定 位 到 HKEY LOCAL MACHINE\SOFTWARE\Microsoft\Shared Tools\Text 
Converters\Import\MSWord6.wpc， 单 击 右键 ， 在 编辑 菜单 击 “ 删 除 ” 就 OK! 

</div> 


</body> 
</html> 


运行 代码 后 ,效果 如 图 9-27 所 示 。 第 一 个 层 设置 了 一 个 图 片 ; 第 二 个 层 设置 了 一 个 文 
字段 落 ， 并 通过 “style” 属 性 设置 了 该 层 的 位 置 及 大 小 等 相关 参数 ， 这 样 进 行 样式 的 统一 
设置 是 不 是 很 方便 呢 ? 具体 的 参数 会 在 后 面 CSS 章节 中 详细 介绍 ， 本 章 只 了 解 <div> 标 签 
的 作用 即 可 (用 户 试 着 将 上 述 代 码 中 “style ”的 “position ”参数 的 值 “absolute ” 改 为 “relative”， 
看 看 页 面 有 什么 变化 ) 。 


.141。 


HTMI/CSS 网 页 设计 与 开发 一 站 式 学 习 一 一 难点 /案例 /练习 


合用 层 标 签 - Windows Intcrnet Explorer 
文件 四 篇 得 节 ) 查看 如 ”收藏 夹 入 ”工具 局 ” 委 纯 妇 
GO Br Tt 7 


图 9-27 使 用 层 标签 


9.8 难点 解析 


本 音 的 难点 是 表格 的 区 套 使 用 和 <div> 层 标签 的 使 用 。 

设置 菊 套 表格 时 需要 注意 : 

(1) 要 合理 利用 “cellpadding” 或 “border” 的 属性 值 来 使 得 外 表 的 边框 显示 出 既 设 
的 效果 。 

(2) 要 使 得 表格 里 面 的 各 元 素 宽度 相对 统一 。 

(3) 要 充分 考虑 显示 器 的 分 辨 率 和 表格 设置 的 宽度 来 决定 相关 属性 的 取 值 。 

<div> 层 标签 的 使 用 需要 经 常 练习 来 熟悉 页 面 的 结构 ， 这 样 才能 更 合理 地 规划 页 面 。 

虽然 表格 的 嵌 套 和 <div> 层 标签 的 使 用 看 似 复杂 , 只 要 大 家 不 断 地 实践 就 能 逐一 领悟 和 
掌握 。 


9.9 综合 实例 


继续 制作 上 一 章 综合 实例 中 的 主页 ， 使 用 <div> 层 标签 排版 主页 。 


圈 设计 分 析 
(1) 主页 包括 多 个 区 域 。 
(2) 将 主页 分 区 域 写 代码 。 
(3) 其 他 子 网 页 排版 使 用 同样 的 方法 。 
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< 人 程序 代码 
使 用 <div> 层 标签 写 主页 代码 ， 首 先是 左 侧 的 公司 简介 代码 : 


<div id="main content"> 
<div id="top banner"> 
<a href="index.html"><img src="images/logo.png" width="130" height= 
"130" alt="home" title="logo" border="0" class="logo"/></a> 
</div> 
<div id="page content left"> 
<div class="title"> 
gnbsp; <p><font face=" 黑 体 "> 欢迎 访问 我 们 的 网 站 </ font></div> 
<div class="content text"> 

<span style="color: rgb(102，102，102); font-family: 宋体 ，arial; 
font-size: 12px; font-style: normal; font-variant: normal; font-weight: 
normal; letter-spacing: normal; line-height: 24px; orphans: 2; text-align: 
left; text-indent: 0px; text-transform: none; white-space: normal; widows: 
2; word-spacing: 0px; -webkit-text-size-adjust: auto -webkit-text- 
stroke-width: 0px background-color: rgb(255, 255, 255); display: 
inline !important; float: none; ">gnbsp;é&nbsp; 

我 公司 创办 于 2000 年 1 月 ， 是 一 家 面向 旅游 行业 提供 一 体 化 电子 商务 服务 ， 帮 助 传统 旅 
游 企业 实现 在 线 化 的 互联 网 技术 开发 公司 。 公 司 旗下 运营 两 大 平台 : ** 旅 游 网 (B2C 平台 ) ， 
中 国 最 大 的 旅游 产品 预订 平台 ，** 通 〈B2B 平台 ) ， 中 国旅 游 同业 合作 首选 平台 ， 国 内 首 个 实 
名 制 旅游 同行 交流 社区 。</span></div> 

<div class="content text"> 

<img src="images/ 网 站 1.jpg"width="130"height="79" alt="pic"title= 
pier class= "pic® /> 

<span style="color: rgb(102，102，102); font-family: 宋体 ，arial; 
font-size: 12px; font-style: normal; font-variant: normal; font-weight: 
normal; letter-spacing: normal; line-height: 24px; orphans: 2; text-align: 
left; text-indent: 0px; text-transform: none; white-space: normal; widows: 
2; word-spacing: Opx; -webkit-text-size-adjust: auto; -webkit-text- 
stroke-width: Opx; display: inline !important; float: none; background- 
color: rgb(255，255，255)">gnbsp;** 旅 游 网 </span><span style="color: 
rgb (102, 102, 102); font-family: 宋体 , arial; font-size: 12px; font-style: 
normal; font-variant: normal; font-weight: normal; letter-spacing: normal; 
line-height: 24px; orphans: 2; text-align: left; text-indent: Opx; 
text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; 
-webkit-text-size-ad]just: auto; —webkit-text-stroke-width: Opx; 
background-color: rgb(255, 255, 255); display: inline !important; float: 
none; "> 是 中 国 最 大 的 在 线 旅游 超市 ， 每 天 为 百 万 游客 提供 超过 百 万 条 旅游 线路 及 几 十 万 件 
单项 旅游 产品 的 预订 服务 ， 旗 下 加 盟 旅行 社 超过 1 万 家 ， 遍 布 全 国 ! </span></div> 

<div class="title"> 

<img src="images/ 网 站 2.jpg"width="130"height="79" alt="pic"title= 


"pic™ class="pic" /> 
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</div> 

<div class="content text"> 

<span style="color: rgb(102, 102, 102); font-family: 宋体 ，arial; 
font-size: 12px; font-style: normal; font-variant: normal; font-weight: 
normal; letter-spacing: normal; line-height: 24px; orphans: 2; text-align: 
left; text-indent: 0px; text-transform: none; white-space: normal; widows: 
2 word-spacing: Opx; -webkit-text-size-adjust: auto; 
—webkit-text-stroke-width: Opx; display: inline !important; float: none; 
background-color: rgb(255, 255, 255)">gnbsp; 

** 通 </span><span style="color: rgb(102，102，102); font-family: 宋 
体 ，arial; font-size: 12px; font-style: normal; font-variant: normal; 
font-weight: normal; letter-spacing: normal; line-height: 24px; orphans: 
2; text-align: left; text-indent: 0px; text-transform: none; white-space: 
normal; widows: 2; word-spacing: Opx; -webkit-text-size-adjust: auto; 
—webkit-text-stroke-width: Opx; background-color: rgb(255, 255, 255); 
display: inline !important; float: none; "> 中 国 最 大 的 旅游 行业 同业 交流 合作 
平台 ， 同 时 也 是 国内 首 个 实名 制 的 旅游 同行 交流 社区 。 旅 游 从 业 人 员 可 以 在 </span><span 
style="color: rgb(102，102，102) ; font-family: 宋体 ,arial; font-size: 
12px; font-style: normal; font-variant: normal; font-weight: normal; 
letter-spacing: normal; line-height: 24px; orphans: 2; text-align: left; 
text-indent: Opx; text-transform: none white-space: normal; widows: 2; 
word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke- 
width: Opx; display: inline !important; float: none; background-color: 
rgb (255，255，255) ">** 通 </span><span style="color: rgb(102, 102, 102); 
font-family: 宋体 ，arial; font-size: 12px; font-style: normal; font- 
variant: normal; font-weight: normal; letter-spacing: normal; line-height: 
24px; orphans: 2; text-align: left; text-indent: 0Px text-transform: 
none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-— 
size-adjust: auto; -webkit-text-stroke-width: Opx; background-color: 
rgb(255, 255, 255); display: inline !important; float: none; "> 与 几 万 
同行 实时 交流 互动 ， 还 可 免费 获取 同行 报价 、 同 行 询 价 ， 是 旅游 从 业 人 员 拓 展 同行 业务 的 首选 
平台 ! </span></div> 

<div class="title"> 

<font face=" 黑 体 "> 合作 网 站 

</font> 

</div> 

<div class="content text"> 

<a href="http://www.123.com"><img src="images/ 合 作 网 站 .jpg" width= 
"106" height="34" alt="s" title="s" class="inspiration" /></a> 

<a href="http://www.123.net"><img src="images/ 合 作 网 站 2.jpg" width= 
"100" height="34" alt="s" title="s" class="inspiration" /></a> 
images/ 合 作 网 站 3.jpg" width= 
"103" height="34" alt="s" title="s" class="inspiration" /></a> 
</div> 
</div> 


<ahref="http://www.123.info"><img src=" 
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其 次 是 右 侧 景点 图 片 代码 : 


<div id="page content right" style="width: 430px; height: 579px"> 
<div class="title"> 

gnbsp; <p><font face=" 黑 体 "> 三 亚 风景 </font></div> 

<div class="content text"> 

<span style="color: rgb(85, 85, 85); font-family: Simsun; font-size: 
14px; font-style: normal; font-variant: normal; font-weight: normal; 
letter-spacing: normal; line-height: 26px; orphans: 2; text-align: left; 
text-indent: Opx; text-transform: none; white-space: normal; widows: 2; 
word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke— 
width: 0px; background-color: rgb (255, 255, 255) ; display: inline !important; 
float: none; ">gnbsp;é&nbsp;&nbsp; 

</span><font size="2"> 

<span style="color: rgb(85, 85, 85); font-family: Simsun; font-style: 
normal; font-variant: normal; font-weight: normal; letter-spacing: normal; 
line-height: 26px; orphans: 2; text-align: left; text-indent: Opx; 
text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; 
-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; display: 
inline !important; float: none; background-color: rgb(255, 255, 255)"> 

三 亚 阳 光 充 足 ， 长 夏 无 冬 ， 素 有 天 然 大 温室 、 绿 色 聚 宝 盆 之 称 。 这 里 气候 温和 ， 属 典型 的 
热带 海洋 性 气候 , 全 年 平均 气温 25 . 5 度 , 年 平均 海水 温度 25 . 1 度 , 冬季 海水 最 低温 度 22 度 ， 
适宜 四 季 潜 水 和 开展 各 类 海上 运动 </span></font><span style="color: rgb(85, 85, 
85); font-family: Simsun; font-size: 14px; font-style: normal; 
font-variant: normal; font-weight: normal; letter-spacing: normal; 
line-height: 26px; orphans: 2; text-align: left; text-indent: Opx; 
text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; 
—webkit-text-size-adjust: auto; —webkit-text-stroke-width: Opx; 
background-color: rgb(255, 255, 255); display: inline !important; float: 
none; ">。 </span></div> 

<div class="content text"> 

<a href="details.html"><img src="images/pic/ 亚 龙湾 .jpg" width="100" 
height="100" alt="pic" title="pic" class="gallery" /></a> 

<a href="details.html"><img src="images/pic/ 大 东海 .jpg" width="100" 
height="100" alt="pic" title="pic" class="gallery" /></a> 

<a href="details.html"><img src="images/pic/ 天 涯 海 角 .jpg" width= 
"100" height="100" alt="pic" title="pic" class="gallery" /></a> 

<a href="details.html"><img src="images/pic/ 星 支 洲 岛 .jpg" width= 
"100"” height="100" alt="pic" title="pic" class="gallery" /></a> 

<a href="details.html"><img src="images/pic/ 大 小 洞天 .jpg" width= 
"100" height="100" alt="pic" title="pic" class="gallery" /></a> 

</div> 
</div> 

</div> 
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运行 代码 后 如 图 9-28 所 示 。 


RR Rio 


图 9-28 ”使 用 <div> 层 标签 排版 主页 


9.10 ”高 手 训练 营 


1. 表格 的 大 小 如 何 控制 ? 

2. 表格 的 结构 由 哪 几 部 分 组 成 ? 

3. 根据 个 人 实际 情况 编写 一 个 可 以 发 表 在 个 人 网 站 上 的 个 人 简介 表格 ， 并 制作 
成 网 页 。 

4. 使 用 表格 的 谈 套 建立 表格 ， 要 求 包 括 网 站 的 logo、 导 航 窗口 、 网 站 主体 板块 及 相 
关 对 应 文字 等 内 容 ， 完 成 后 效果 如 图 9-29 所 示 。 


加 网 区 | 5 [二 
全 "加 总- 这 DD- 命 TaAW-.” 


图 9-29 效果 图 
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在 文字 和 数据 的 处 理 上 ， 除 了 使 用 表格 呈现 得 比较 条 理 之 外 ， 还 经 常 通过 列表 的 方式 
提纲 者 领地 把 主要 内 容 归 为 几 类 。 

HTML 的 列表 标签 提供 列表 项 目的 编排 功能 ， 在 编写 文字 内 容 时 可 以 将 提纲 一 一 列 
出 ， 这 种 形式 使 网 页 的 内 容 看 上 去 更 加 简洁 。HTML 中 有 三 种 列表 ， 分 别 是 有 序列 表 、 无 
序列 表 和 定义 列表 。 下 面具 体 学 习 。 


DO 有 序列 表 标签 的 属性 
口 无 序列 表 和 有 序列 表 的 区 别 
口 如 何 设置 列表 的 嵌 套 


10.1 创建 有 序列 表 


有 序列 表 是 一 列 使 用 数字 或 编号 进行 标记 排列 的 项 目 ， 遂 常 列表 项 目 是 有 先后 顺序 
的 ， 一 般 用 来 描述 操作 的 步骤 等 。 


10.1.1 有 序列 表 标 签 一 一 <ol> 


有 序列 表 的 标签 是 <ol>， 它 是 双 标签 。 在 每 一 个 列表 项 目前 要 使 用 <ji> 标 签 。<ol> 标 签 
列表 的 形式 是 带 有 前 后 顺序 之 分 的 编号 。 如 果 插 入 和 删除 一 个 列表 项 ， 编 号 会 自动 调整 。 
其 语法 为 : 


<ol> 

<1i> 第 1 项 
<1i> 第 2 项 
<1i> 第 3 项 


实例 10-1: 创建 一 个 有 序列 表 ， 内 容 为 用 Dreamweaver 创建 网 页 页 面 的 基本 步骤 


<html> 
<head> 


<title> 创 建 一 个 有 序列 表 </title> 


HTMI/CSS 网 页 设计 与 开发 一 站 式 学 习 一 一 难点 /案例 /练习 


</head> 

<body> 

<h3> 用 Dreamweaver 创建 网 页 页 面 的 基本 步骤 </h3> 

<ol> 

<1i> 在 Dreamveaver “文件 一 新 建 一 常规 一 基本 页 一 HTML” 了 这 样 就 建 好 了 一 个 页 面 ， 英文 版 的 
默认 的 文件 名 为 untitleq .html。 中 文 版 的 默认 的 文件 名 为 “无 标题 文档 ”。html 就 表示 这 
个 网 页 文件 是 一 个 静态 的 HTML 文件 。 给 它 改名 为 index.html。 

<1i> 在 标题 空格 里 输入 网 页 名 称 ， 点 击 修改 一 页 面 属性 ， 打 开 “ 页 面 属 性 ”窗口 。 在 这 里 可 以 设置 
网 站 的 标题 、 背 景 颜色 或 背景 图 像 ， 超 级 链接 的 颜色 (一 般 默 认 即 可 ) ， 其 他 都 保持 默认 即 可 。 

<1i> 此 时 光标 位 于 左上 角 ， 可 输入 一 句 话 ， 如 “欢迎 来 到 我 的 主页 ”。 选 取 文字 ， 用 菜单 “窗口 / 
属性 ”打开 属性 面板 ， 选 取 文字 大 小 为 6， 再 使 文字 居中 ， 然 后 在 文字 前 用 几 个 回 车 使 其 位 于 
页 面 中 间 等 。 

<1i> 如 要 选取 字体 ， 则 选择 字体 中 的 最 后 一 项 : 编辑 字体 列表 。 然 后 在 对 话 框 中 选 + 号 ， 接 着 在 “可 
用 字体 ” 栏 中 选择 需要 加 入 到 字体 列表 中 的 一 种 字体 ， 点 击 中 间 的 按钮 就 可 以 加 入 了 。 

</body> 

</html> 


运行 代码 后 ， 可 以 看 到 网 页 中 的 内 容 排 列 成 为 一 个 有 序列 表 的 格式 ， 且 每 个 序列 前 包 
含有 相应 的 顺序 号 ， 效 果 如 图 10-1 所 示 。 


SO [rune [x 


图 10-1 创建 一 个 有 序列 表 


10.1.2 ”有 序列 表 的 属性 一 一 start 


有 序列 表 顺 序 编 号 的 设置 是 由 <oB> 标 签 的 两 个 属性 “start” 和 “type” 来 完成 的 。“start” 
属性 用 来 设置 编号 开始 的 数字 ,默认 的 从 “1” 开始， 则 该 属性 可 以 省 略 。 如 果 “start=2”， 
则 编号 从 “2” 开 始 。 其 语法 为 : 

<ol start=" 编 号 ”> 

<1i> 第 1 项 

<1i> 第 2 项 

<1i> 第 3 项 
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实例 10-2: 创建 一 个 有 序列 表 ， 使 其 项 目 编号 从 2 开始 


<html> 

<head> 

<title> 创 建 一 个 有 序列 表 </title> 

</head> 

<body> 

<h3> 用 Dreamweaver 创建 网 页 页 面 的 基本 步骤 </h3> 

<ol start="2"> 

<1i> 在 Dreamveaver “文件 一 新 建 一 常规 一 基本 页 一 HTML”， 这样 就 建 好 了 一 个 页 面 ， 英文 版 的 

默认 的 文件 名 为 untitled.html。 中 文 版 的 默认 的 文件 名 为 “无 标题 文档 ”。html 就 表示 这 
个 网 页 文件 是 一 个 静态 的 HTML 文件 。 给 它 改名 为 index.html。 

<1i> 在 标题 空格 里 输入 网 页 名 称 ， 点 击 修改 一 页 面 属性 ， 打 开 “ 页 面 属性 ”窗口 。 在 这 里 可 以 设置 

网 站 的 标题 、 背 景 颜 色 或 背景 图 像 ， 超 级 链接 的 颜色 (一般 默认 即 可 ) ， 其 他 都 保持 默认 即 可 。 

<1i> 此 时 光标 位 于 左上 角 ， 可 输入 一 句 话 ， 如 “欢迎 来 到 我 的 主页 ”。 选 取 文字 ， 用 菜单 “窗口 / 
属性 ”打开 属性 面板 ， 选 取 文字 大 小 为 6， 再 使 文字 居中 ， 然 后 在 文字 前 用 几 个 回 车 使 其 位 于 
页 面 中 间 等 。 

<1i> 如 要 选取 字体 ， 则 选择 字体 中 的 最 后 一 项 : 编辑 字体 列表 。 然 后 在 对 话 框 中 选 + 号 ， 接 着 在 “可 
用 字体 ” 栏 中 选择 需要 加 入 到 字体 列表 中 的 一 种 字体 ， 点 击 中间 的 按钮 就 可 以 加 入 了 。 

</body> 

</html> 


运行 代码 后 ， 可 以 看 到 有 序列 表 的 编号 从 “2” 开 始 ， 效 果 如 图 10-2 所 示 。 


创建 一 个 有 了 厅 列 下 - Winde， 


OO rvwe-st 人 ls x [F 
六 件 四 “ 电 短 四 查看 轴 ， 必 环 天 和， 工具 ID 大 二 0 
语 必 入 天。 富 加 建议 FY ” 忆 ] 攻取 更 儿 队 加 要 块 ”图 | 百度 
车 健一 ?有 FF3 寺 从 -旧名 可- THD- RO 
用 Dreamweaver 创 建 网 页 页 面 的 基本 步 要 
2 在 Dreamveaver “文件 一 新 建 一 常规 一 ee HILL ” 的 
一 个 页 面 版 ted hr nl, 中 文 二 的 默 


/ 属 民情 而 上 人 
在 文字 前 用 用 个 回 车 全 其 位 于 页 面 负 问 等 。 
网 芝 了 休 的 机 匾 辑 字体 列表 。 人 然后 企 

， 按 着 在 “可 月 字体 “ 臣 中 选择 需要 加 入 到 字体 列表 

人 "A 


寺 成 EE ET 


图 10-2 设置 有 序列 表 的 起 始 值 


10.1.3 ”有 序列 表 的 属性 一 一 type 


type” 属 性 用 于 设置 编号 为 数字 或 字母 等 的 类 型 ， 如 “type=a”， 则 编号 用 英文 字 
母 来 表示 。 其 语法 为 : 


.149 。 
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<ol type=" 编 号 类 型 " > 
<1i> 第 1 项 
<1i> 第 2 项 
<1i> 第 3 项 


</ol1> 


常见 的 项 目 序号 类 型 如 表 10-1 所 示 : 


表 10-1 项 目 序 号 类 型 


效果 描述 
表示 列表 项 目 用 数字 标号 (1,2,3...) 
表示 列表 项 目 用 大 写字 母 标 号 (A,B,C...) 
表示 列表 项 目 用 小 写字 母 标 号 (a,b,c.….) 

表示 列表 项 目 用 大 写 罗 马 数字 标号 (I, IL,II... 
表示 列表 项 目 用 小 写 罗 马 数字 标号 (CiL 记 证.…) 


实例 10-3: 创建 一 个 有 序列 表 ， 使 其 项 目 编号 分 别 使 用 小 写 英文 字母 和 大 写 罗 马 数字 


<html> 

<head> 

<title> 创 建 一 个 有 序列 表 </title> 
</head> 

<body> 

<h3> 列 表 项 目 编号 使 用 小 写 英文 字母 </h3> 
<ol type=a> 

<1i> 项 目 投资 类 型 

<1i> 项 目 所 在 地 

<1i> 项 目 投资 总 额 

<1i> 现 有 的 项 目 

</ol1> 

<h3> 列 表 项 目 编号 使 用 大 写 罗马 数字 </h3> 
<ol type=I start=2> 
<1i> 项 目 投资 类 型 

<1i> 项 目 所 在 地 

<1i> 项 目 投资 总 额 

<1i> 现 有 的 项 目 

</ol1> 

</body> 

</html> 


运行 代码 后 ， 可 以 看 到 网 页 中 两 个 列表 的 项 目 序 号 类 型 发 生 了 变化 ， 效 果 如 图 10-3 
所 示 。 


i 
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创建 一 个 有 反 列 表 - Windows Internet Explorer 
文件 中 注 强 全 查看 QD 收 立 天 多 工具 加 帮助 00 
GO [Brauts uta nee x 
说 安 大 创 时 一 个 有 订 列 表 偏 "- 国 ” 癌 " 具 


列表 项 目 编号 使 用 小 写 英文 字母 


列表 项 目 编号 使 用 大 写 罗马 数字 
II， 项 目 投资 类 型 


VV 现 有 的 


图 10-3 设置 不 同类 型 的 列表 项 目 序 号 


10.2 ”创建 无 序列 表 


无 序列 表 是 一 列 使 用 符号 进行 标记 排列 的 项 目 ， 列 表 项 目 是 没有 先后 顺序 的 ， 遂 常 是 
并 列 排列 的 。 


10.2.1 


无 序列 表 的 标签 是 <ul>， 它 是 双 标 签 。 在 每 一 个 列表 项 目前 也 使 用 <li> 标 签 。 其 语法 为 : 


<ul> 

<1i> 第 1 项 
<1i> 第 2 项 
<1i> 第 3 项 


实例 10-4: 创建 一 个 无 序列 表 ， 内 容 为 手机 游戏 列表 


<html> 

<head> 
<title> 创 建 一 个 无 序列 表 </title> 
</head> 

<body> 

<h3> 最 新 手机 游戏 列表 </h3> 

<ul> 

<1i> 轩 辕 传 奇 

<1i> 自 由 幻想 


人 


<1i> 英 雄 岛 
<1i> 穿 越 火线 
</ul> 
</body> 
</html> 
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运行 代码 后 , 效果 如 图 10-4 所 示 。 从 图 中 可 以 看 出 , 列表 项 目前 序号 类 型 变 成 了 符号 。 


创建 一 个 无 序列 表 - Windows Internet Explorer 
文件 四 秽 缉 查看 四 收 阐 夹 W。 工具 GD 帮助 和 0 
[FREE 

请 安 ”看 ge 一 个 无 订 雪 偷 - 园 - 地 "已 


最 新 手机 游戏 列表 


。 轩辕 传奇 
。 自由 包 想 


。 英雄 岛 
。 穿越 火线 


图 10-4 ”创建 一 个 无 序列 表 


10.2.2 无 序列 表 属 性 一 一 type 


默认 情况 下 ， 无 序列 表 的 项 目 符号 类 型 是 一 个 实心 圆 。 为 避免 过 于 单一 ， 通 过 “type” 
其 语法 为 : 


属性 可 以 设置 为 不 同 的 类 型 。 


<ul type=" 编 号 类 型 " > 


<1i> 第 1 项 
<1i> 第 2 项 
<1i> 第 3 项 


</ul> 


“type” 属 性 有 三 个 属性 值 ， 如 表 10-2 所 示 : 


表 10-2 type 属性 值 


属性 值 符号 类 型 
disc 实心 圆 
circle 空心 圆 
Square 小 方块 


实例 10-5: 创建 一 个 无 序列 表 , 其 中 , 列表 项 目 类 型 符号 分 别 设置 为 “空心 圆 ” 和 “小 


方块 ” 


人 


<html> 
<head> 
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<title> 创 建 一 个 无 序列 表 </title> 


</head> 
<body> 


<h3> 热 门 新 闻 </h3> 

<ul type=circle> 

<1i> 移 动 版 金山 WPS4.7 版 本 下 载 支持 夜间 模 ... 
<1i> 做 游 浏览 器 软件 再 次 发 布 更 新 HTML5 跑 分 .… 
<1i>Linux Mint 13“Maya“ 正 式 版 系统 对 外 .… 
<1i> 超 级 捕 快 2012 版 全 能 录像 软件 推出 及 其 ... 


</ul> 
<br> 


<h3> 预 订 帮助 </h3> 
<ul type=square> 
<1i> 预 订 常 见 问题 
<1i> 付 款 与 发 票 
<1i> 其 他 注意 事项 


</ul> 
</body > 
</html> 


运行 代码 后 效果 如 图 10-5 所 示 。 


使 用 同样 的 方法 ， 还 可 以 对 <l 户 标签 添加 “type” 属 性 ， 来 分 别 设置 符 


创建 一 个 无 序列 表 - Windows Internet Explorer 
文件 全 编辑 是 ) 查看 收 乱 严 册 ) 工具 I) 帮助 0D 


GO Bruma-ursImts | x 


pl- 


宽 安居- 个 天 FA 了 例 - 加 各 - 如 WDD- 使 IAW.” 


热门 新 闻 


。 移动 版 金山 WFS4. 7 版 本 下 载 支持 夜间 模 … 
2 的 信和 全 全 作 全 二 人 

JEin 式 版 系统 对 外 … 
人 


预订 帮助 
=。 预订 带 见 问题 
付款 与 发 对 
: 其 他 注意 事项 


图 10-5 改变 无 序列 表 项 目的 类 型 符号 


就 可 以 单独 对 项 目 进行 定义 。 


实例 10-6: 


一 个 无 序列 表 ， 把 其 中 的 每 个 列表 项 目 类 型 符 


人 室 心 圆 ”和 “ 小 方块 ” 


<html> 
<head> 


号 分 别 设置 为 “ 


号 的 类 型 ， 这 样 


实心 圆 ”、 


ba 
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<title> 创 建 一 个 无 序列 表 </title> 
</head> 

<body> 

<h3> 北 京 美食 </h3> 

<ul> 

<1i type=disc> 北 京 烤鸭 

<1i type=circle> 豆 汗 

<1i type=square> 驴 打滚 


</ul> 

</body > 

</html> 

运行 代码 后 效果 如 图 10-6 所 示 。 


创建 一 个 无 序列 表 - Windows Internet Explorer 
文件 了 编辑 下 ) 查看 收藏 夹 人 ) 工具 CD) 和 帮助 0 

GO [Br ui-utss | x 

宽 安 在 一 个 无 列表 丛 - 团 - 山 - 辐 IE6@- 


北京 美食 
。 北 京 烤鸭 
2 哥 守 


，。 驴 打 流 


图 10-6 不 同 的 项 目 类 型 符号 


10.3 创建 定义 列表 


定义 列表 也 叫 描 述 性 列表 ， 主 要 用 于 名 词 或 概念 的 解释 。 定 义 列 表 默 认为 两 个 层次 ， 
第 一 层 为 列表 项 标签 <dt>, 第 二 层 为 注释 项 标签 <dd>。<d 忆 和 <dd> 标 签 通 常 是 成 对 使 用 的 。 
也 可 以 一 个 列表 项 对 应 于 几 个 解释 项 ， 这 种 方式 很 少 用 。 其 语法 为 : 

<dl> 

<dt> 第 1 项 <dd> 注 释 1 

<dt> 第 2 项 <dd> 注 释 2 


<dt> 第 3 项 <ddq> 注 释 3 
</dl> 


实例 10-7: 创建 一 个 定义 列表 


<html> 
<head> 


.154。 
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<title> 创 建 一 个 定义 列表 </title> 

</head> 

<body> 

<h3> 电 脑 主板 相关 技术 名 词 解 释 </h3> 

<dl> 

<dt>ACPI<dd> 英 文 是 Advanced Configuration and Power Interface， 即 高 级 配置 和 电 
源 管 理 界面 。 说 明 这 种 接口 标准 使 得 操作 系统 第 一 次 能 够 执行 对 电源 和 系统 配置 进行 控制 的 功 
能 。 采用 ACPI 标准 ， 系 统制 造 商 就 能 够 推出 与 最 新 的 个 人 电脑 独创 的 onNow 设计 相 一 致 的 系 
统 产品 。 

<dt> BIOS<dd> 英文 是 Basic Input-Output System， 说 明 即 Pc 的 基本 输入 输出 系统 ， 是 
集成 在 主板 上 的 一 个 ROM 芯片 ,其 中 保存 有 PC 系统 最 重要 的 基本 输入 /输出 程序 、 系 统 信息 设 
置 程序 、 开 机 上 电 自 检 程 序 和 系统 启动 自 举 程序 。 在 主板 上 可 以 看 到 BIOS ROM 芯片 。 一 块 主 
板 性 能 优越 与 否 、 是 否 运行 稳定 ,兼容 性 。 是 否 很 好 等 关键 问题 , 很 大 程度 上 取决 于 板 上 的 BIOS 
管理 功能 是 否 先进 。 

<dt> DMA<qdd> 英 文 是 Direct Memory Access， 其 意思 是 “存储 器 直接 访问 ”。 

说 明 它 是 指 一 种 高 速 的 数据 传输 操作 ， 人 允许 在 外 部 设备 和 存储 器 之 间 直 接 读 写 数 据 ， 既 不 通过 CPU， 
也 不 需要 cPU 干预 。 整 个 数据 传输 操作 在 一 个 称 为 “DMA 控制 器 ”的 控制 下 进行 的 。CPU 除了 
在 数据 传输 开始 和 结束 时 做 一 点 处 理 外 ， 在 传输 过 程 中 CPU 可 以 进行 其 他 的 工作 。 这 样 ， 在 大 
部 分 时 间 里 ，cPU 和 输入 输出 都 处 于 并 行 操作 。 因 此 ， 使 整个 计算 机 系统 的 效率 大 大 提高 。 

</dl> 


</body> 
</html> 
运行 代码 后 效果 如 图 10-7 所 示 。 


创建 一 个 定义 列表 - Windows Internet Explorer 
文件 @) ”编辑 信 ) 查看 WW 收藏 夫 (W) 工具 I) 和 帮助 O00) 

GO Br urs- te ne x en 
3 俩 " 国 和 恰 "了 丽 人 -从 I 上 QD- 


电脑 主板 相关 技术 名 词 解 释 


ACPI 
英文 是 Advanced Configuration and Power Interface， 即 高 级 配置 和 电源 管理 
界面 。 说 明 这 种 接口 标准 使 得 操作 系统 第 一 次 能 够 执行 对 电源 和 系统 配置 进行 控 

制 的 功能 。 a 系统 制造 商 就 能 够 推出 与 最 新 的 个 人 电脑 独创 的 


3 自 举 程序 。 
否 运行 稳定 、 兼 容 性 。 是 否 很 好 等 关键 问 
很 大 程度 双关 光宇 的 BO 全 证 内 是 关头 壕 


文 是 Direct Jiemory Access， 其 意思 是 “存储 器 直接 访问 ”。 说 明 它 是 指 一 
和 Pd 既 不 通过 
也 不 需要 CPI a “DA 控制 器 “的 控制 下 
祷 和 的 和 输 开 始 和 结束 时 做 一 点 处 理 外 ， 在 传 人 
进行 其 他 约 工作 。 这 样 ， 在 大 部 分 时 间 里 ， 条 入 针 山 和香 并 和 和， 
此 ， 使 整个 计算 机 系统 的 效率 大 大 提高 。 


图 10-7 创建 定义 列表 


四 <dd> 默 认 的 注释 是 显示 在 另 一 行 中 ， 当 使 用 <dl compact="compact"> 后 ， 注 释 项 
和 列表 项 将 显示 在 同一 行 。 
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10.4 设置 列表 文字 的 颜色 


在 创建 列表 时 ， 为 能 呈现 出 更 好 的 效果 ， 可 以 将 列表 中 的 文字 添加 相应 的 颜色 。 既 可 
以 在 列表 中 整体 设置 ， 也 可 以 单独 对 列表 项 目 进行 设置 。 其 语法 为 : 


<1i><font color=" 颜 色 代 码 "> 列 表 内 容 </font></1i> 
实例 10-8: 设置 列表 文字 的 颜色 


<html> 

<head> 

<title> 设 置 列表 文字 的 颜色 </title> 

</head> 

<body> 

<h3> 北 京 特产 </h3> 

<ul><font color=red> 

<1i> 景 泰 蓝 </1i> 

<1i> 玉 器 </1i> 

<1i> 宫 灯 </1i> 

<1i> 琉 璃 料 器 </1i> 

</font> 

</ul> 

<br> 

<h3> 北 京 旅游 景点 </h3> 

<ul type=square> 

<1i><font color="#996600"> 了 颐和园 </font></1i> 
<1i><font color=blue> 八 达 岭 长 城 </font></1i> 
<1i><font color="#CC0000"> 天 坛 公园 </font></1i> 
</ul> 

</body> 

</html> 


运行 代码 后 效果 如 图 10-8 所 示 。 


认 委 刘表 立 字 的 丙 苦 -Windovs Internet Fxplorer 
文件 中。 名 各 5)】 考 看 几 。 中 麻 关 册 | 工具 CD 和 了 0 


图 10-8 设置 列表 文字 的 颜色 


人 
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10.5 列表 的 谋 套 


将 一 个 列表 嵌入 到 另 一 个 列表 中 ， 作 为 另 一 个 列表 的 一 部 分 ， 叫 做 列表 的 嵌 套 。 无 论 
是 有 序列 表 或 无 序列 表 的 嵌 套 都 可 以 重复 使 用 。 
实例 10-9: 设置 列表 的 嵌 套 


<html> 

<head> 

<title> 设 置 列表 的 嵌 套 </title> 

</head> 

<body> 

<h3> 趣 味 问 答 </h3> 

<ul> 

<1i><font color=red size=4>“ 八 仙 过 海 ” 中 的 八仙 除 铁 拐 李 、 张 果 老 、 吕 洞 宾 、 曹 国 粤 外 
还 有 </font></1i> 

<ol type=A> 

<1i> 韩 非 子 、 蓝 采 和 、 何 浴 姑 、 汉 钟离 </1i> 

<1i> 蓝 采 和 、 何 仙姑 、 韩 非 子 、 汉 钟离 </1i> 

<1i> 韩 湘子 、 蓝 采 和 、 何 仙姑 、 红 孩儿 </1i> 

<1i> 韩 湘子 、 蓝 采 和 、 何 仙姑 、 汉 钟离 </1i> 

</ol> 

<br> 

<1i><font color=red size=4>“ 无 冕 之 王 ” 的 由 来 与 下 列 哪 一 个 有 关 </Efont></1i> 

<ol type=A> 

<1i> 英 国 《泰晤士 报 》</1i> 

<1i> 法 国 《 费 加 罗 报 》</1i> 

<1i> 美 国 《 太 阳 报 》</1i> 

<1i> 德 国 《 明 镜 》 周 刊 </1i> 

</ol1> 

</ul> 

</body> 

</html> 


运行 代码 后 效果 如 图 10-9 所 示 。 
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图 10-9 添加 列表 的 柑 套 
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10.6 难点 解析 


本 章 难 点 依然 是 嵌 套 的 使 用 ， 使 用 列表 嵌 套 时 容易 混淆 各 种 列表 的 概念 。 要 分 清 列 表 
的 类 型 ， 可 以 这 么 理解 ， 各 项 目 各 条 列 间 并 无 顺序 关系 ， 纯 粹 只 是 利用 条 列 来 呈现 资料 的 
就 是 无 序列 表 , 在 各 项 目前 面 均 有 一 符号 以 示 区 隔 ; 而 各 条 列 之 间 是 有 顺序 的 , 如 从 1、2、 
3… 一 直 延 伸 下 去 的 就 是 有 序列 表 。 

在 HTML 页 面 中 ， 合 理 地 使 用 列表 标签 可 以 起 到 提纲 和 格式 排序 文件 的 作用 。 


10.7 综合 实例 


实际 上 , 综合 实例 中 主页 及 其 他 子 网 页 最 上 方 的 文字 导航 就 是 一 个 列表 , 通过 CSS 样 
式 表 ， 使 之 呈现 出 较为 美观 的 效果 。 具 体 代码 如 下 : 


<ul class="menu"> 

<li><a href="index.html" class="nav"> 主 页 </a></1i> 
<1i><a href="#"” class="nav"> 关 于 我 们 </a></1i> 

<li><a href="#" class="nav"> 工 作 人 员 </a></1i> 

<1i><a href="gallery.html" class="nav"> 相 关 资 源 </a></1i> 
<1i><a href="contact.html" class="nav"> 联 系 我 们 </a></1i> 
</ul> 


运行 代码 后 如 图 10-10 所 示 。 


玫 首 关 土 攻 山 I¥#YE 要 关 姑 如 起 于 尖刀 


学 部 | 天 EM 


六 村 加 彩 糙 国 至 旦 和 ) 情感 适中 ) 工 首 中 ”所 丢人 


图 10-10 添加 列表 


10.8 高 手 训 练 营 


1. 有 序列 表 和 无 序列 表 的 区 别 是 什么 ? 

2. 设置 有 序列 表 起 始 值 的 是 哪个 属性 ? 

3. 根据 下 面 的 描述 文字 创建 一 个 无 序列 表 ， 项 目 符号 分 别 为 “空心 国 ” “实心 圆 ” 
你 喜欢 哪 种 类 型 的 手机 ? 
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苹果 手机 

安 草 系统 的 智能 机 

Windows 系统 的 智能 机 

4. 在 上 一 章 的 习题 中 ， 用 户 制作 过 简历 表 ， 在 个 人 经 历 描 述 内 容 中 ,使 用 列表 的 
方式 来 使 得 经 历 的 内 容 更 加 清晰 和 条 理 。 
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当 用 户 熟 悉 了 静态 网 页 的 制作 后 就 能 感觉 到 它 的 功能 比较 单一 ， 这 时 会 想 建立 具有 交 
互 性 的 动态 网 站 。 动 态 网 站 中 经 常用 到 的 一 个 元 素 就 是 表单 。 表 单 (Form) 是 HTML 的 
一 个 重要 部 分 ， 是 网 站 管理 员 与 用 户 之 间 进 行 沟通 的 桥梁 ， 网 页 中 的 表单 可 以 用 来 收集 用 
户 填 写 的 信息 。 例 如 ， 向 文本 框 中 输入 的 文字 或 数字 、 在 方 框 中 打 勾 、 使 用 单 选 按钮 选中 
一 个 选项 或 从 一 个 列表 中 选择 一 个 选项 等 。 当 用 户 填写 好 这 些 表单 ， 将 其 发 送 到 网 站 的 后 
台 服 务 器 ， 交 由 服务 器 端的 脚本 或 应 用 程序 来 处 理 ， 继 而 反馈 信息 给 用 户 。 这 样 就 使 得 网 
页 具有 了 交互 功能 。 

目前 大 多 数 的 网 站 ， 尤 其 是 大 中 型 的 网 站 ， 都 用 到 了 与 用 户 进行 动态 交流 的 表单 。 如 
某 网 站 的 问卷 调查 、 网 站 的 会 员 注册 等 。 表 单 可 以 说 是 个 容器 ， 里 面 的 类 型 不 同 ， 所 表示 
的 功能 也 不 同 ， 其 中 ， 包 括 有 文本 框 、 单 选 框 、 按 钮 、 下 拉 菜 单 等 表单 元 素 。 在 本 章 中 ， 
将 循序 渐进 地 讲述 如 何 创 建 从 基本 的 到 复杂 的 表单 。 


本 章 要 点 : 
表单 的 数据 传输 方式 

口 如 何 添加 输入 类 控件 

口 添加 各 种 按钮 

口 如 何 设 置 菜单 类 控件 的 大 小 


日 


11.1 表单 标签 一 一 <form> 


在 HIML 中 表单 是 用 <form> 标 签 定义 的 ， 它 是 双 标签 。 每 一 个 表单 都 必须 以 <form> 
标签 起 始 ， 并 以 </form> 标 签 结 束 。< form > 标签 中 包含 的 数据 有 表单 控件 及 必需 的 伴随 数 
据 ， 如 控件 标签 、 处 理 数据 的 脚本 等 。 

<<form> 标 签 主要 有 表单 名 称 、 程 序 处 理 、 数 据 传 输 方式 等 5 个 基本 属性 ， 其 中 表单 
的 程序 处 理 和 数据 传输 方式 属性 是 必 不 可 少 的 。 


11.1.1 ”程序 处 理 属性 一 一 action 


表单 本 身 是 没有 用 途 的 , 用 户 填 入 表单 的 信息 需要 程序 来 进行 处 理 , 表单 里 的 “action” 
属性 就 定义 了 表单 所 要 提交 到 的 目的 文件 ， 该 目的 文件 收 到 信息 后 ， 通 常 都 和 一 个 程序 连 
接 实 现 数据 的 处 理 。 
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“action” 的 属性 值 既 可 以 是 一 个 程序 也 可 以 是 一 个 脚本 的 URL 地 址 (表单 需要 提交 
的 地 址 ， 也 就 是 表单 中 数据 收集 后 ， 将 要 传递 到 的 地 址 ) 。 其 语法 为 : 


<form action=" 表 单 的 处 理 程序 "> 


</form> 
轨 提交 的 地 址 既 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 ， 还 可 以 是 其 他 的 地 址 形式 ， 
如 发 送 E-mail 等 。 


实例 11-1: 创建 一 个 表单 ， 并 设 定 表单 的 处 理 程序 


<html> 

<head> 

<title> 设 定 表单 的 处 理 程序 </title> 
</head> 

<body> 

<h3> 提 交 到 相关 页 面 </h3> 

<form action="html 1.asp"> 
</form> 

<h3> 提 交 到 电子 邮件 </h3> 

<form action="123@163.com"> 
</form> 

</body> 

</html> 


该 实例 中 ， 第 一 个 表单 处 理 程序 是 将 数据 提交 到 相关 页 面 ， 第 二 个 表单 处 理 程序 数 
es ni 0 程序 运行 后 将 表单 中 的 信息 以 电子 邮件 形式 发 送 。 


四 表单 通常 是 与 CGI 配合 使 用 的 ，“action” 属 性 便 是 用 以 指明 该 CGI 程式 的 位 置 ， 
这 样 ， 此 表单 所 填 的 资料 才能 正确 传 给 CGI 作 处 理 。 若 反馈 没有 CGI 以 进行 测 
试 ， 可 设 定 此 参数 为 “action =mailto:name(@163.com” 这 样 该 表单 所 填 的 数据 将 
会 发 送 至 此 电子 邮件 地 址 。 


11.1.2 ”表单 名 称 属性 一 一 name 


就 像 其 他 元 素 命名 一 样 ，“name” 属 性 用 于 给 表单 来 命名 。 建 议 用 户 为 每 一 个 表单 i 
置 一 个 功能 相符 的 名 称 ， 这 样 可 以 防止 表单 信息 提交 到 后 台 处 理 程序 时 出 现 混 乱 ， 如 调 1 
页 面 的 表单 可 以 命名 为 “research” 等 。 其 语法 为 : 


吸 沙 


<form name=" 表 单 的 名 称 "> 


</form> 


实例 11-2: 创建 一 个 表单 ， 并 设 定 表单 的 名 称 
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<html> 

<head> 

<title> 设 定 表单 的 名 称 </title> 

</head> 

<body> 

<form action="mailto:name@163.com" name="register"> 
</form> 

</body> 

</html> 


该 实例 中 ， 表 单 的 名 称 为 “register”。 
11.1.3 ”数据 传输 方式 一 一 method 


表单 的 “method” 属 性 定义 了 发 送 表 单数 据 的 方式 (表单 数据 发 送 到 “action” 属 性 所 
规定 的 页 面 ) ， 主 要 是 针对 服务 器 端 处 理 。 表 单数 据 可 以 作为 URL 变量 (method="get") 
或 者 HTTP post Cmethod="post") 的 方式 来 发 送 。 

当 “method=get” 时 ， 数 据 的 传输 方式 是 将 数据 提交 到 表单 的 “action” 属 性 所 指定 的 
URL 中 ， 属 性 值 和 表单 内 各 字段 一 一 对 应 ， 经 过 编码 之 后 ， 通 过 URL 发 送 〈 可 以 在 地 址 
栏 里 看 到 ) 。 其 优点 是 速度 快 ， 执 行 效率 高 ; 缺点 是 传送 的 数据 量 较 小 ， 不 能 大 于 2KB， 
且 安全 性 较 低 。 

当 “method=post” 时 ， 数 据 的 传输 方式 是 通过 HTTP 发 送 ， 浏 览 器 将 与 “action” 属 
性 中 指定 的 表单 处 理 服务 器 建立 联系 ， 一 旦 建立 连接 之 后 ， 浏 览 器 就 会 按 分 段 传输 的 方法 
将 数据 发 送 给 服务 器 ， 在 地 址 栏 看 不 到 表单 的 提交 信息 。 它 的 优点 是 传送 的 数据 量 较 大 ， 
安全 性 较 高 ， 常 用 于 一 些 保密 数据 的 传送 。 

其 语法 为 : 

<form method=" 传 送 方式 "> 

</form> 


实例 11-3: 创建 一 个 表单 ， 并 设 定 表单 的 传送 方式 


<html> 

<head> 

<title> 设 定 表单 的 传送 方式 </title> 

</head> 

<body> 

<form action="mailto:name@163.com" name="register" method="post"> 
</form> 

</body> 

</html> 


该 实例 中 ， 表 单 “register” 中 的 数据 将 通过 电子 邮件 的 形式 发 送 。 
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轩 建议 : 在 做 数据 查询 时 ， 用 get 提交 方式 ; 而 在 做 数据 添加 、 修 改 、 删 除 或 数据 
中 包含 机 密 信 息 时 ， 建 议 用 post 提交 方式 。 


11.1.4 ”编码 方式 一 一 enctype 


表单 的 “enctype” 属 性 定义 了 表单 数据 发 送 的 编码 方式 。 默 认 情况 下 ， 表 单数 据 会 编 
人 码 为 “application/x-www-form-urlencoded”， 也 就 是 说 ， 在 发 送 到 服务 器 之 前 ， 所 有 字符 
都 会 进行 编码 (空格 转换 为 "+" 加 号 ， 特 殊 符号 转换 为 ASCII HEX 值 ) 。 其 语法 为 


<form enctype=" 编 码 方式 "> 
</form> 


“enctype” 属 性 的 属性 值 如 表 11-1 所 示 : 
表 11-1 enctype 的 属性 值 
属性 值 


application/x-www-form-urlencoded 


含义 
在 发 送 前 编码 所 有 字符 〈 默 认 ) 
不 对 字符 编码 。 在 使 用 包含 文件 上 传 控件 的 表单 时 ， 必 须 使 
用 该 值 
不 对 特殊 字符 编码 ， 纯 文本 形式 发 送 


multipart/form-data 


text/plain 


实例 11-4: 创建 一 个 表单 ， 并 设 定 表单 的 编码 方式 


<html> 

<head> 

<title> 设 定 表单 的 编码 方式 </title> 

</head> 

<body> 

<form action="mailto:name@163.com" name="register" method="post" enctype= 
"text/plain"> 

</form> 

</body> 

</html> 


该 实例 中 ， 表 单 信息 中 的 数据 将 以 纯 文本 的 编码 形式 发 送 。 
11.1.5 ”目标 窗口 方式 一 一 target 


之 前 学 过 <a> 标 签 的 “target” 属 性 的 使 用 。“target” 属 性 的 作用 就 是 指 对 链接 的 页 面 
以 什么 样 的 形式 展现 出 来 ， 常 用 的 属性 值 有 “ blank”) 在 新 弹出 的 一 个 浏览 器 窗 ww 
开 链 接 的 页 面 ) 、“_self” (在 原来 的 窗口 中 打开 链接 的 页 面 ) 、“ top” (在 浏览 器 
整个 窗口 中 打开 ) 、“_parent” (在 上 一 级 窗口 中 打开 ) 。 

以 表单 形式 提交 的 目标 窗口 中 通常 用 来 显示 表单 的 反馈 信息 ， 如 是 否 成 功 提 交 该 表 
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单 、 是 否 出 错 等 信息 。 其 语法 为 : 


<form target=" 表 单 的 目标 窗口 打开 方式 "> 


</form> 


实例 11-5: 创建 一 个 表单 ， 并 设 定 表单 的 目标 窗口 打开 方式 


<html> 

<head> 

<title> 设 定 表单 的 目标 窗口 打开 方式 </title> 

</head> 

<body> 

<form action="mailto:name@163.com" name="register" method="post" enctype= 

"text/plain" target=" self "> 

</form> 

</body> 

</html> 


该 实例 中 ， 表 单 的 反馈 信息 将 在 同一 窗口 显示 。 


11.2 添加 输入 类 控件 


表单 元 素 也 称 表单 控件 ， 按 照 填写 方式 分 为 输入 类 和 下 拉 菜 单 类 。 输 入 类 控件 是 最 常 
见 到 的 表单 元 素 。 它 是 用 <input> 标 签 来 定义 的 。 其 语法 为 : 
<form> 


<input name=" 控 件 的 名 称 ”type=" 控 件 的 类 型 "> 


</form> 
这 里 控件 的 类 型 包括 文本 框 、 复 选 框 、 按 钮 等 ， 通 过 不 同 的 属性 值 来 区 分 。 
11.2.1 文本 框 一 一 text 


文本 框 是 网 页 中 最 常见 到 的 文字 输入 区 域 之 一 ， 如 在 登录 区 、 讨 论 区 等 。 文 本 框 控件 
类 型 的 属性 值 为 “text”， 它 在 页 面 中 将 以 单行 文本 框 形式 显示 。“text” 属 性 值 参数 如 表 
11-2 所 示 : 


表 11-2 text 的 属性 值 参数 


含义 
用 于 文本 框 的 命名 ， 名 称 中 不 能 包含 特殊 字符 
定义 文本 框 在 页 面 中 显示 的 长 度 ， 单 位 为 字符 
定义 在 文本 框 中 输入 的 文字 最 大 数 
定义 文本 框 中 的 默认 值 
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其 语法 为 : 


<input type="text" name=" 控 件 名 称 ”size=" 文 本 框 的 长 度 " maxlength=" 最 大 字符 数 " 
value=" 文 本 框 的 默认 值 "> 


实例 11-6: 在 表单 中 添加 文本 框 


<html> 
<head> 
<title> 在 表单 中 添加 文本 框 </title> 
</head> 
<body> 
<h3> 不 同属 性 的 文本 框 </h3> 
<form name="example" action="html 2.asp" method="post"> 
<!-- 添 加 一 个 长 度 为 15 的 文本 框 --> 
姓名 : <input type="text" name="user" size=15> 
<br> 
<! 一 -添加 一 个 长 度 为 15， 但 是 最 长 字符 只 有 5 的 文本 框 --> 
职务 : <input type="text" name="job" size=15 maxlength=5> 
<br> 
<!-- 添 加 一 个 长 度 为 20、 但 最 多 可 输入 30 个 字符 ， 默 认 显 示 “*****@* .*” 的 文本 框 --> 
电子 邮件 : <input type="text" name="email" size=20 maxlength=30 value= 
于 坟 炎 炎炎 @ 类 。 灵 Ws 


</form> 
</body> 
</html> 
运行 代码 后 效果 如 图 11-1 所 示 。 从 图 中 可 以 看 到 三 种 不 同属 性 的 文本 框 。 


在 表单 中 洋 加 文本 枢 - Windows Internet Explorer 已 回 民 ) 
立 件 四 编辑 里】 豆 看 WD 收 某 夹 (4) 工具 (I) 帮助 人 0 
GO Ermia-sta x 
帘 安 大 在 表单 添加 文 杠 偷 - 目 - 蝇 - 


不 同属 性 的 文本 框 
姓名 ， 


图 11-1 在 表单 中 添加 文本 框 


有 时 希望 表单 中 的 文本 框 是 只 读 的 ， 让 用 户 不 能 修改 其 中 的 信息 ， 如 使 <input 
type="text" name="input" value=" 中 国 必 的 内 容 ，“ 中 国 ” 两 个 字 不 可 以 修改 。 用 户 可 以 使 
用 “readonly” 属 性 来 设置 。 其 语法 如 下 : 


<input type="text" name="input" value=" 中 国 " readonly> 
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11.2.2 ”密码 框 一 一 password 


密码 框 是 为 了 隐藏 用 户 密码 信息 的 输入 框 ， 语 法 形式 与 文本 框 类 似 。 定 义 密码 框 控件 
类 型 的 属性 值 是 “password”。 可 能 有 人 会 问 ， 在 密码 框 里 面 输入 的 密码 信息 会 不 会 显示 
出 来 ， 这 样 的 话 使 得 密码 不 安全 。 其 实 这 点 不 用 担心 ， 当 在 密码 框 中 输入 密码 时 ， 所 输入 
的 字符 等 全 部 会 用 “*” 符 号 代替 ， 这 样 从 页 面 显示 上 隐藏 了 密码 信息 ， 起 到 安全 作用 ， 当 
刷新 页 面 时 ， 密 码 会 及 时 清除 。 同 文本 框 包含 的 参数 一 样 ，“password” 包 含 的 参数 如 表 
11-3 所 示 : 


表 11-3 password 的 参数 值 


用 于 控件 的 命名 ， 名 称 中 不 能 包含 特殊 字符 
定义 密码 框 在 页 面 中 显示 的 长 度 ， 单 位 为 字符 
定义 在 密码 框 中 输入 的 文字 最 大 数 
定义 密码 框 中 的 默认 值 ， 以 “*” 显 示 


name 


其 语法 为 : 


<input ” type="password"” name=" 控 件 名 称 "” size=" 密 码 框 的 长 度 " maxlength=" 最 大 
字符 数 " value=" 密 码 框 的 默认 值 "> 


实例 11-7: 在 表单 中 添加 密码 框 


<html> 

<head> 

<title> 在 表单 中 添加 密码 域 </title> 

</head> 

<body> 

<h3> 不 同 效果 的 密码 框 </h3> 

<form name="example" action="html 2.asp" method="post"> 
<!-- 添 加 一 个 长 度 为 20， 默 认 密码 设置 为 666666 的 密码 框 --> 

原始 密码 : <input type="password" name="bank" size=20 value="666666"> 
<br> 

<!-- 添 加 一 个 长 度 为 20 的 密码 框 --> 

设置 新 密码 : <input type="password" name="user" size=20> 
<br> 

<! 一 添加 一 个 长 度 为 20， 但 是 最 多 可 以 输入 30 个 字符 的 密码 框 --> 


重复 新 密码 : <input type="password" name="user2" size=20 maxlength=30> 


<br> 

</form> 
</body> 
</html> 
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运行 代码 后 效果 如 图 11-2 所 示 。 图 中 包含 三 种 不 同 效果 的 密码 框 。 


在 表单 中 添加 客 码 城 - Windows Internet Explorer 
文件 和 护 各 EE) 攻 ED 必 半天 4) 工具 C) 帮助 0 
GO- Pru x [BE 
帘 安 | 大 在 表单 中 才 加 密码 城 


不 同 效果 的 密码 框 


原始 密码 ，****** 
设置 新 密码 
重复 新 密码 ， 


图 11-2 在 表单 中 添加 密码 框 


当 在 新 密码 区 域 输入 新 的 密码 时 ， 只 能 看 到 相应 的 符号 ， 而 不 是 实际 密码 本 身 。 输 入 
新 密码 后 ， 效 果 如 图 11-3 所 示 。 
在 表单 中 添加 穹 玛 域 - Windows 
文件 中 妨 名 查看 W 收 戎 交 Q) 工具 吕 ) 
GO Brumia-wt yx 
帘 安居 在 表 间 中 尖 加 密码 城 


不 同 效果 的 密码 框 


原始 密码 ,|*** 


设置 新 密码 ;|* 
重复 新 密码 ,| 


图 11-3 在 密码 框 中 输入 文字 


11.2.3 ” 单 选 框 一 一 radio 


表单 的 功能 就 是 收集 用 户 填写 的 信息 。 当 出 现 多 个 选项 而 且 只 能 选择 一 个 选项 时 ， 或 
当 可 以 选择 两 个 或 两 个 以 上 选项 时 ， 就 会 分 别 用 到 单 选 框 和 复 选 框 。 本 节 先 来 学 习 单 选 框 
的 使 用 。 

单 选 框 是 在 表单 中 有 多 个 选项 , 且 只 能 选 一 个 的 情况 下 使 用 。 和 文本 框 与 密码 框 一 样 ， 
都 是 设置 在 <input> 里 面 的 “type” 属 性 中 ， 定 义 单 选 框 控件 类 型 的 属性 值 是 “radio”。 

在 表单 中 ， 单 选 框 是 存在 多 个 选项 的 ， 当 从 多 选项 中 选择 一 个 选项 时 ， 为 了 区 别 这 几 
个 选项 是 属于 哪个 单 选 框 时 ， 用 “name” 属 性 定义 。 如 果 想 指定 某 个 选项 默认 状态 下 处 于 
选中 状态 时 ， 用 “checked” 属 性 定义 ， 且 只 能 有 一 个 单 选 框 设置 。 当 选中 某 选 项 后 ， 通 过 
“value” 属 性 传送 到 处 理 程序 中 的 值 必须 要 设置 。 其 语法 为 : 


TE 
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<input type="radio™ value=" 单 选 框 取 值 ” name=" 单 选 框 名 称 " checked> 
实例 11-8: 在 表单 中 添加 单 选 框 


<html> 

<head> 

<title> 在 表单 中 添加 单 选 框 </title> 

</head> 

<body> 

<h3> 你 爱 吃 什么 水 果 : </h3> 

<form> 

<!-- 设 置 3 个 单 选 框 ， 且 都 设置 name 为 food--> 
<input type="radio" name="food"> 苹 果 

<!-- 设 置 name 为 food， 表 示 选 项 在 food 中 选 一 个 --> 
<input type="radio" name="food" checked > 香 欧 
<input type="radio" name="food" > 桔子 
</form> 

</body> 

</html> 


运行 代码 后 效果 如 图 11-4 所 示 。 


在 表单 中 添加 单 过 框 Windows Internet Exploror 


[EBDRE pl- 
文件 QD 名 醒 Q 刘 看 怀 庆 天 Q) 工具 WD 和 且 o 
真 必 本 天 | 各 司 寻 兴 FBs ， | 胡 取 更 多 则 加 入 决 。 国度 


逢 在 玫 单 中 洪 加 间 沈 拒 向" 且 - 口 星 " 珀 四" 站 ey 
你 爱 吃 什么 水 果 : 

口 苹果 加 香 郁 口 桔子 
3 E27 -im 


图 11-4 在 表单 中 添加 单 选 杠 


11.2.4” 复 选 框 一 一 checkbox 


顾名思义 ， 复 选 框 是 可 以 选 多 个 选项 的 选项 框 ， 与 单 选 不 同 的 是 复 选 框 可 以 选取 多 
个 选项 ， 而 且 也 可 以 默认 儿 个 选项 都 处 于 选中 状态 。 定 义 复 选 框 控件 类 型 的 属性 值 是 
“checkbox”， 与 单 选 框 一 样 ， 可 以 用 “checked” 属 性 来 表示 选项 框 的 选中 状态 。 其 语 
法 为 : 


<input type="checkbox"™ value=" 复 选 框 取 值 ” name=" 复 选 框 名 称 " checked> 
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实例 11-9: 在 表单 中 添加 复 选 框 


<html> 
<head> 


<title> 在 表单 中 添加 复 选 框 </title> 


</head> 


<body> 


<h3> 你 爱 什么 运动 : </h3> 


<form> 
<input 
<input 
<br> 

<input 
<input 
<br> 

<input 
<input 


</form> 
</body> 
</html> 


type="checkbox" name="sport" value="a" checked> 打 篮球 
type="checkbox"” name="sport" value="b" > 打 羽 毛 球 


type="checkbox" name="sport" value="c" > 打 高 尔 夫 球 
type="checkbox" name="sport"” value="d" > 疏 山 


type="checkbox" name="sport" value="e" > 跳绳 
type="checkbox" name="sport" value="f" checked> 跑 步 


运行 代码 后 效果 如 图 11-5 所 示 。 


在 表单 中 添加 复 选 框 - Windows Internet Ezplorer 辕 占 加 
文件 到， 蝙 辑 E) 查看 收 总 天 @) 工具 GD) 帮助 0 
GO Bru 妈 | | 区 | 百度 一 下 ， 你 就 知 
窜 安居 在 表单 中 添加 复 迁 杠 侩 "- 辐 是- 
你 爱 什 么 运动 : 
打 篮球 口 打 羽 毛 球 


口 打 高 尔 夫 球 口 息 山 
跳绳 回 跑步 


图 11-5 在 表单 中 添加 复 选 杠 


11.2.5 “文本 域 一 一 <textarea> 


我 们 已 经 学 习 过 单行 文本 框 的 添加 ， 此 外 还 有 一 种 特殊 的 文本 样式 ， 叫 文本 域 。 它 主 
要 用 于 输入 多 行文 本 ， 填 写 大 量 的 文字 ， 常 见于 留言 、 评 论 等 区 域 。 定 义 文本 域 的 标签 是 
<textarea>， 实 际 上 文本 域 是 在 文本 框 上 加 上 两 个 属性 “rows” 和 “cols” 来 表示 : “rows” 
表示 显示 的 行 数 ， 也 就 是 文本 域 的 行 数 ，“cols” 表 示 显 示 的 列 数 ， 也 就 是 文本 域 的 列 数 。 
通过 设置 行 数 和 列 数 来 改变 文本 框 的 大 小 ， 以 便于 页 面 的 统一 布局 。 其 语法 为 : 


bl 
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<textarea name=" 文本 域 的 名 称 ” rows=" 文本 域 的 行 数 "cols=" 文 本 域 的 列 数 


"></textarea> 


实例 11-10: 在 表单 中 添加 文本 域 


<html> 

<head> 

<title> 在 表单 中 添加 文本 域 </title> 
</head> 

<form> 

<h3> 用 户 注册 页 面 实例 </h3> 

用 户 名 : <input type="text"size=15> 
<br> 


密 gnbsp; gnbsp; 人 码 : <input type="password"size=15> 
<br> 

确认 密码 : <input type="password"size=15> 

<!-- 设 置 表 单 的 单 选 框 -=-> 

<p> 你 的 年 龄 是 :<br> 

<input type="radio" name=reg>18 周岁 以 下 

<input type="radio" name=reg>19-25 周岁 

<input type="radio" name=reg>26-30 周岁 

</p> 

<p> 你 的 个 人 的 爱好 :<br> 

<!-- 设 置 表单 的 复 选 框 --> 

<input type="checkbox" name=reg value="a" checked > 上 网 
<input type="checkbox" name=reg value="b" > 看 书 
<input type="checkbox" name=reg value="c" > 打球 
<input type="checkbox" name=reg value="d" > 游戏 
<input type="checkbox" name=reg value="e" > 其 他 
</p> 

<p> 自 我 简介 : <br> 

<!-- 设 置 表单 文本 域 --> 

<textarea cols=60 rows=5> 

</textarea> 

</p> 

<body> 

</body> 

</html> 


运行 代码 后 效果 如 图 11-6 所 示 。 
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在 雪 单 中 薄 如 文本 城 一 于 
文件 。 编 柱 人 ) 查看 外 
GO- Prt rE 


变 安 “看 在 表单 中 天 加 文本 域 例 - 国 - 剖 - 舍 贡 -使 ITRW- 


你 的 年 龄 是 ， 
@18 周岁 以 下 口 19-25 周岁 口 26-30 周岁 


你 的 个 人 的 爱好 
回 上 网 口 看 书 口 打球 口 游戏 口 其 他 


自我 简介 ， 


图 11-6 在 表单 中 添加 文本 域 


11.3 按 锂 


按钮 在 表单 中 是 最 重要 的 ， 当 输入 完 表 单 信息 时 ， 需 要 按钮 进行 提交 ， 当 输入 错误 信 
息 时 ， 需 要 按钮 来 进行 重 置 ; 当 需 要 打开 或 关闭 某 窗 口 时 也 都 用 到 按钮 的 功能 。 之 前 所 讲 
的 内 容 只 是 网 页 表单 的 一 部 分 ， 一 张 完整 的 网 页 表单 是 需要 按钮 进行 数据 处 理 的 。 


11.3.1 标准 按钮 一 一 <button> 


标准 按钮 是 网 页 中 常见 到 的 灰色 小 方块 ， 一 般 需要 关联 相应 的 脚本 程序 来 处 理 表单 。 
标准 按钮 是 用 “button” 来 定义 的 , 其 中 , “value” 可 以 设置 按钮 上 要 显示 的 文本 , “onclick” 
可 以 实现 鼠标 处 理 的 一 些 功能 。 其 语法 为 : 


<input type="button"” value=" 按 钮 上 要 显示 的 文本 "” onclick=" 处 理 程序 "> 
实例 11-11: 在 表单 中 添加 标准 按钮 


<html> 

<head> 
<title> 标 准 按 钮 </title> 
</head> 

<body> 
<h3> 会 员 注册 </h3> 


<form name=" 


register" action="user.asp" method="post"> 
姓名 : <input type="text" name="user" value="user O00l"size=15> 
<br> 


密码 : <input type="password " name="password" size=15 maxlength=10> 


ba 
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<br> 

<input type="button" name="show" value=" 显 示 信 息 "> 

<br> 

<input type="button" name="close" value=" 关 闭 当 前 窗口 ”onclick= 
"window.close()"> 

</form> 

</body> 

</html> 


运行 代码 后 效果 如 图 11-7 所 示 。 


标 淮 按 钮 ¥: 3 ernet Explorer 
文件 @) 编辑 EF) 查看 QW 收藏 夹 人 ) 工具 CI) 帮助 9) 
GO [Brum-wrra x [EST Sus 


窜 安 | 关 术 Es 乌 [| 全 -加 -地 "局 mo- 


时 我 的 电脑 _ 
图 11-7 添加 标准 按钮 

单 击 “ 显 示 信 息 ” 按 钮 ， 页 面 没有 发 生变 化 ， 因 为 在 “显示 信息 ”按钮 代码 中 没有 设 
置 相 应 处 理 程序 ， 当 单 击 “ 关 闭 当前 窗口 ”按钮 时 ， 则 会 弹出 关闭 窗口 警告 《鼠标 设置 了 
处 理 程序 “window.close0”) ， 效 果 如 图 11-8 所 示 。 


单 击 “ 是 ”按钮 ， 将 关闭 当前 窗口 。 
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11.3.2 ”提交 按钮 和 重 置 按钮 一 一 <submit> 和 <reset> 


提交 按钮 和 村 


E 置 按钮 是 一 类 特殊 的 按钮 ， 不 需要 设置 “onclick” 参 数 ， 也 可 实现 表单 


数据 的 处 理 。 一 般 来 说 ， 提 交 与 重 置 按钮 应 同时 出 现 。 
当 type="submit" 时 ， 在 浏览 器 相应 的 位 置 产生 一 个 提交 按钮 。 当 用 户 单 击 该 按钮 时 ， 
浏览 器 就 会 把 整个 表单 的 输入 信息 传递 给 服务 器 。 其 中 ，“value” 属 性 用 来 设置 提交 按钮 


上 要 显示 的 文本 ， 默 认 的 方式 是 “提交 表单 内 容 ”。 在 一 个 表单 中 必须 有 提交 按钮 ， 和 否则 
将 无 法 向 服务 器 传递 信息 。 
当 type="reset" 时 ， 在 浏览 器 相应 的 位 置 产 生 一 个 重 置 按钮 。 当 用 户 单 击 该 按钮 时 ， 浏 


览 器 就 会 清除 表单 中 所 有 的 输入 信息 而 恢复 到 初始 状态 。 同 样 ， 其 “value” 属 性 用 来 设置 
重 置 按钮 上 要 显示 的 文本 ， 默 认 方式 是 “ 重 署 ”。 


其 语法 为 : 


<input type="submit" name=" 按 钮 的 名 称 ” value=" 按 钮 上 要 显示 的 文本 "> 


<input type="reset" name="reset" value=" 重 置 "> 


实例 11-12: 


<html> 
<head> 


添加 提交 按钮 和 重 置 按钮 


<title> 添 加 提交 和 重 置 按钮 </title> 


</head> 
<body> 
网 站 注册 : 
<form actio 
<p> 用 户 姓 名 : 
</p> 
<p> 登 录 密码 : 
</p> 
<p> 重 复 密码 : 
</p> 
<p> 出 生日 期 : 
</p> 
<p> 联 系 方式 : 
</p> 
<p> 居 住 城市 
北京 


<br> 


&nbsp; gnbsp 
<input name: 
<br> 

&nbsp; &nbsp 
<input name: 


&nbsp; gnbsp 


n="mailto:user@163.com" name="register" method="post"> 


<input name="username" type="text" size=15> 

<input name="password" type="password" size=15> 
<input name="password2" type="password" size=15> 
<input name="date" type="text" size=15> 

<input name="tel" type="text" size=15 maxlength=50> 


<input name="city" type="radio" value="radiobutton" checked> 


; ENnbsp; gnbsp; gnbsp; gnbsp; gnbsp; Enbsp; gnbsp; gnbsp; 


="city" type="radio" value="radiobutton"> 上 海 


;7 &nbsp; gnbsp; gnbsp; gnbsp; gnbsp; &nbsp; gnbsp; gnbsp; 
="city" type="radio" value="radiobutton"> 广 东 <br> 


;7 ENnbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; 
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<input name="city" type="radio" value="radiobutton"> 其 他 gnbsp; 

<input name="city" type="text"> 

</p> 

<p> 平 时 喜好 : 

<input name="enjoy" type="checkbox" value="checkbox" checked> 跑 步 健身 egnbsp; 


&nbsp; gnbsp; 

<input name="enjoy2" type="checkbox" value="checkbox"> 得 街 gnbsp;&nbsp; 
&nbsp7 

<input name="enjoy3" type="checkbox" value="checkbox" checked> 上 网 <br> 

&nbsp; gnbsp; gnbsp; &nbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; 

<input name="enjoy4" type="checkbox" value="checkbox"> 其 他 gnbsp; 

<input name="enjoy5" type="text"> 

<p> 

<input type="submit" name="Submit" value=" 提 交 ">&nbsp; &nbsp;&nbsp; &nbsp; 
&nbsp; Enbsp; &nbsp;&nbsp; 

<input type="reset" name="reset" value=" 重 置 "> 

</p> 

</form> 

</body> 

</html> 


运行 代码 后 效果 如 图 11-9 所 示 。 


深 加 提交 和 更 轿 按 徊 一 Windows Internet Explorer 
文件 中 久 铀 区 查看 中 收 刘 夫 (工具 I) 帮助 UD 
GO Br rr mt-amr ew |x [52 EE 


帘 会 | 邮 二 加 提醒 轩 近 旨 全 -和 目 础 - 呈 F 画 mm 全 IRD- ” 


网 站 注册 ， 
用 户 姓名 ， 
登录 密码 ， 
重复 密码 ， 
出 生日 期 ， 
联系 方式 ， 
居住 城市 ， 


图 11-9 添加 提交 按钮 和 重 置 按钮 


当 输 入 完 相 关 信息 ， 单 击 “ 提 交 ” 按 钮 后 ， 会 弹出 一 个 对 话 窗口 ， 提 示 该 页 面 的 信息 
将 以 电子 邮件 形式 发 送 ， 如 图 11-10 所 示 。 
当 单 击 ”按钮 时 ， 页 面 中 所 填写 的 信息 将 全 部 清除 ， 恢 复 到 图 11-9 所 示 效 果 。 


.174。 


第 11 章 添加 表单 


回答 衔 。” 回 上 网 


图 11-10 点 击 提交 按钮 后 弹出 对 话 窗口 


11.3.3 图像 按钮 一 一 <image> 


同 “ 提 交 ” 按 钮 类 似 ， 当 type="image" 时 ， 在 浏览 器 相应 的 位 置 产生 一 个 图 像 按 钮 。 


当 用 户 单 


fi 该 图 像 时 ， 浏 览 器 就 会 把 整个 表单 的 输入 信息 传递 给 服务 器 。 其 中 ， 用 来 设置 


图 像 位 置 的 “sre” 属 性 是 必 不 可 少 的 ， 图 像 地 址 既 可 以 是 绝对 地 址 也 可 以 是 相对 地 址 。 


<input type="image" src=" 图 像 地 址 ” name=" 图 像 按 钮 名 称 "> 
实例 11-13: 添加 图 像 按钮 


<html> 

<head> 
<title> 添 加 图 像 按 钮 </title> 
</head> 

<body> 

网 站 注册 : 


<form action="mailto:user@163.com" name="register" method="post"> 


<p> 用 户 姓名 : <input name="username" type="text" size=15> 


</p> 


<p> 登 录 密 码 : <input name="password" type="password" size=15> 


</p> 


<p> 重 复 密码 : <input name="password2" type="password" size=15> 


</p> 


<p> 出 生日 期 <input name="date" type="text" size=15> 


</p> 


<p> 联 系 方式 : <input name="tel" type="text" size=15 maxlength=50> 


</p> 


<p> 居 住 城市 : <input name="city" type="radio" value="radiobutton" checked> 
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北京 
<br> 
&nbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; 
<input name="city" type="radio" value="radiobutton"> 上 海 
<br> 
&nbsp; gnbsp; gnbsp; &nbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; 
<input name="city" type="radio" value="radiobutton"> 广 东 <br> 
&nbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; 
<input name="city" type="radio" value="radiobutton"> 其 他 gnbsp; 
<input name="city" type="text"> 
</p> 
<p> 
<input type="image" src=" 注 册 .png" name="imagel">&gnbsp; gnbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; gnbsp; 
<input type="reset" name="reset" value=" 重 置 "> 
</p> 
</form> 
</body> 
</html> 


运行 代码 后 ， 通 过 单 击 “提交 注册 ”的 图 片 按钮 ， 会 弹出 一 个 对 话 窗口 ， 提 示 该 页 面 
的 信息 将 以 电子 邮件 形式 发 送 ， 效 果 如 图 11-11 所 示 。 


诬 加 加 像 按 馈 -Windows Jnternet Esplorer 


TO. BrvmmwerIwt—aNF\e a | x le 
次 从 外 尖 WE 从 接 但 前 - 回 篇 * ND -IAW-” 


网 站 注册 ， 
用 户 奴 各 ， [oseriT 


登录 密码 : 


Explerer 
辣 复 密码 ， | EN 法 关 禾 Ds 
By 


出 生日 期 可 以 怠 后 ， 也 可 以 取消 这 提交。 


We CI CR] 
居住 城市 : 


图 11-11 添加 图 像 按钮 


11.4 添加 菜单 列表 类 控件 


下 拉 菜 单 和 列表 在 网 页 应 用 非常 广泛 。 如 在 表单 中 ， 选 择 出 生年 月 时 或 是 多 项 选择 答 
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案 时 ， 都 会 用 到 此 类 控件 ， 它 们 都 是 用 <selec 放 和 <option> 标 签 来 定义 的 。 


11.4.1 下 拉 菜 单 
为 节省 网 页 页 面 的 空间 ， 经 常 通过 下 拉 菜 单 的 方式 来 选择 选项 。 


<selecf> 标 签 是 双 标 签 ，<selecf> 与 </selecf> 之 间 的 内 容 就 是 一 个 下 拉 菜 单 的 内 容 ， 一 


个 下 拉 菜单 默认 的 只 有 一 个 选项 被 选中 。 其 中 ， 它 的 “name” 属 性 用 来 命名 下 拉 


称 ; “size” 属 性 用 来 定义 下 拉 菜 单 的 长 度 ， 默 认 值 为 “1”。 


菜单 的 名 


<option> 标 签 是 单 标签 ， 用 来 定义 下 拉 菜 单 中 的 选项 。 它 必须 嵌 套 在 <selec 必 标签 中 ， 


菜单 中 有 多 少 个 选项 就 要 有 多 少 个 <option> 标 签 与 之 对 应 。 其 中 ， 它 的 “value” 


属性 值 表 


示 当 该 选项 被 选中 并 提交 后 ， 传 递 给 服务 器 的 数据 ;， “selected” 属 性 则 表示 初始 被 选中 的 


选项 。 
其 语法 为 : 


<select name=" 下 拉 菜 单 的 名 称 ”size=" 下 拉 菜 单 的 长 度 "> 
<option value=" 选 项 值 "> 选项 一 

<option value=" 选 项 值 "> 选项 二 

<option value=" 选 项 值 "selected> 选 项 三 > 

</select> 


实例 11-14: 添加 下 拉 菜 单 


<html> 

<head> 
<title> 下 拉 菜 单 </title> 
</head> 

<body> 
<h3> 新 用 户 注 册 </h3> 


<form action="mailto:user@163.com" name="register" method="post"> 


<p> 性 别 : <i><input name="sex" type="radio" value="m" 
checked="checked"> 


&nbsp; 男 gnbsp; gnbsp; <input name="sex" type="radio" value="f">gnbsp; 


女 </i></p> 

<p> 生 日 : 

<select name="year"> 

<option value="0">-- 请 选择 --</option> 
<option value="1986">1986</option> 
<option value="1985">1985</option> 
<option value="1984">1984</option> 
<option value="1983">1983</option> 
<option value="1982">1982</option> 
<option value="1981">1981</option> 
<option value="1980">1980</option> 
</select></p> 
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<select 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
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name="month"> 


value="0">-- 请 选择 --</option> 


Value="11">01</option> 
Value="12">02</option> 
Value="13">03</option> 
Value="14">04</option> 
15">05</option> 
value="16">06</option> 


valu 


value="17">07</option> 
value="18">08</option> 
value="19">09</option> 
value="20">10</option> 
value="21">11</option> 
22">12</option> 


value= 


</select></p> 
<p> 身 高 : 


<select 
<option 
<option 
<option 
<option 
<option 
<option 
<option 
<option 


name="height"> 
value="168">168</option> 
value="169">169</option> 


难点 /案例 /练习 


value="170" selected="selected">170</option> 


value="171">171</option> 
value="172">172</option> 
value="173">173</option> 
value="174">174</option> 
value="175">175</option> 


</select></p> 


</form> 
</body> 
</html> 


运行 代码 后 效果 如 图 11-12 所 示 。 
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下 拉 莱 单 - Windows Internet Explorer 
文件 人 ) ”编辑 下 ) 查看 扣 收 鞍 天) 工具 CD) 帮助 中 
GO. Ermt 


实 交大 Ti 薪 单 


新 用 户 注册 


性 唱 ®@ 男 口 妈 
生日 [ma 司 


身高 ，[iio 鸭 


图 11-12 ”添加 下 拉 菜单 
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11.4.2 ”列表 框 


列表 框 同 下 拉 菜 单 类 似 ， 也 是 一 个 选项 列表 ， 不 同 的 是 它 可 以 显示 多 个 选项 。 其 中 ， 
“size” 属 性 用 来 设 定 列表 框 的 大 小 ， 如 果 选 项 较 多 且 超 过 列表 框 的 大 小 时 ， 会 自动 在 右 
侧 出 现 滚动 条 ; “multiple” 属 性 用 来 定义 预选 多 个 选项 。 其 语法 为 : 


<select name=" 列 表 框 的 名 称 "” size=" 列 表 框 的 长 度 " multiple > 
<option value=" 选 项 值 ” selected> 选 项 一 

<option value=" 选 项 值 "> 选项 二 

<option value=" 选 项 值 "> 选 项 三 > 


</select> 
实例 11-15: 添加 列表 框 


<html> 

<head> 

<title> 下 拉 列 表 </title> 

</head> 

<body> 

<h3> 新 用 户 注册 </h3> 

<form action="mailto:user@163.com" name="register" method="post"> 
<p> 用 户 姓名 : <input name="username" type="text" size=15></p> 


<p> 登 录 密 码 : <input name="password" type="password" size=15></p> 


<p> 重 复 密码 : <input name="password2" type="password" size=15></p> 
<p> 性 别 : <i><input name="sex" type="radio" value="m" 
checked="checked"> 

&nbsp; 男 gnbsp; enbsp; <input name="sex" type="radio" value="f">&nbsp; 
女 </i></p> 

<p> 生 日 : 

<select name="year"> 

<option value="0">-- 请 选择 --</option> 

<option value="1986">1986</option> 

<option value="1985">1985</option> 

<option value="1984">1984</option> 

<option value="1983">1983</option> 

<option value="1982">1982</option> 

<option value="1981">1981</option> 

<option value="1980">1980</option> 

</select></p> 

<select name="month"> 

<option value="0">-- 请 选择 --</option> 

<option value="11">01</option> 

<option value="12">02</option> 


a 
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<option value="13">03</option> 
<option value="14">04</option> 
<option value="15">05</option> 
<option value="16">06</option> 
<option value="17">07</option> 
<option value="18">08</option> 
<option value="19">09</option> 
<option value="20">10</option> 
<option value="21">11</option> 
<option value="22">12</option> 
</select></p> 

<p> 身 高 : 

<select name="height"> 

<option value="168">168</option> 
<option value="169">169</option> 
<option value="170" selected="selected">170</option> 
<option value="171">171</option> 
<option value="172">172</option> 
<option value="173">173</option> 
<option value="174">174</option> 


<option value="175">175</option> 

</select></p> 

<p> 注 册 本 站 的 原因 

<select name="reason" size="3" multiple> 

<option value="reason1"> 通 过 朋友 介绍 </option> 

<option value="reason2"> 网 站 链接 </option> 

<option value="reason3"> 个 人 爱好 </option> 

<option value="reason4"selected> 访 问 量 高 </option> 

<option value="reason5"> 学 习 </option> 

</select></p> 

<p> 

<input type="submit" name="submit" value=" 提 交 ">gnbsp; &nbsp; &nbsp; 
&nbsp; Enbsp; &nbsp; &nbsp;&nbsp; <input type="reset" name="reset" 
value=" 重 置 "> 

</p> 

</form> 

</body> 

</html> 


运行 代码 后 ， 可 以 看 到 网 页 中 添加 了 一 个 5 个 选项 的 列表 框 ， 可 以 进行 多 项 选择 ， 效 
果 如 图 11-13 所 示 。 


“180° 


第 11 章 添加 表单 


下 拉 列 表 - Windows Internet Explorer 
文件 四 ”编辑 全 查看 WD 收 宁 夹 全 工具 如 帮助 op 
GO Prumrs-wts et Xx [BE TPR J 
| 全 -和 目 - 雪 - 全 -全 TRV- 


性 别 : @ 男 曲 雪 


生日 [sg 国 0 


身高 ，[1w 国 


注册 本 站 的 原因 | 字 习 
本 E33 


图 11-13 添加 列表 框 


11.5 ”<id> 标 签 


<id> 标 签 主要 用 于 标示 表单 中 唯一 的 元 素 ， 可 以 是 文本 框 、 密 码 框 及 其 他 表单 元 素 。 
在 运行 程序 时 并 不 显示 该 <id> 标 签 的 属性 值 。 其 语法 为 : 


<input type=" 控 件 类 型 " name=" 控 件 名 称 ” size=" 控 件 长 度 " id=" 元 素 的 唯一 名 称 "> 
11.6 ”隐藏 属性 一 一 hidden 


当 用 户 不 想 显示 某 些 选项 ， 而 提交 表单 后 需要 向 服务 器 传输 这 些 数 据 时 ， 通 过 设置 
type=" hidden"， 将 其 在 浏览 器 窗口 中 隐藏 。 其 语法 为 : 


<input ” type="hidden" name=" 隐 藏 选项 的 名 称 " value=" 提 交 的 数据 值 ”> 
实例 11-16: 在 表单 中 添加 隐藏 属性 


<html> 

<head> 

<title> 在 表单 中 添加 隐藏 属性 </title> 
</head> 

<body> 

<h3> 不 同属 性 的 文本 框 </h3> 


<form name="example" action="html 1.asp" method="post"> 


hs 
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<!-- 添 加 一 个 长 度 为 15 的 文本 框 --> 
姓名 : <input type="text" name="user" size=15> 
as 只 
<! 一 -添加 一 个 长 度 为 15， 但 是 最 长 字符 只 有 5 的 文本 框 --> 
职务 : <input type="text" name="job" size=15 maxlength=5> 
<br> 
<! 一 添加 隐藏 内 容 --> 
<input type="hidden" name="idl" value="e-mail"> 
</form> 
</body> 
</html> 


运行 代码 后 ， 隐 藏 的 内 容 不 会 显示 在 网 页 中 ， 效 果 如 图 11-14 所 示 。 


在 表单 中 添加 隐藏 属性 一 Windows Internet Explorer 
文件 下 ) 编辑 于) 查看 QW) 收藏 夹 W) 工具 (0) 帮助 0D) 
GO- Pru-wt yx 
窗 突 辣 在 表单 中 应 加 陷 关 属性 | 僵 - 园 - 咒 " 司 m 口 


不 同属 性 的 文本 框 


姓名 ， 
职务 ， 


图 11-14 添加 隐藏 属性 


当 提 交 表 单 时 ， 该 隐藏 的 内 容 名 称 “idl ”和 数据 值 “e-mail” 会 同时 传递 给 服务 器 。 


11.7 难点 解析 


章 涉及 的 控件 较 多 ， 难 点 包括 理解 表单 的 数据 传输 方式 、 程 序 处 理 属 性 等 方面 ， 本 
节 有 具体 讲解 “action” 属 性 。 

“action ”属性 规定 表单 数据 应 该 发 到 哪个 脚本 文件 来 进行 处 理 。 许 多 虚拟 主机 提供 商 
都 提供 有 发 送 邮件 脚本 ， 或 其 他 可 定制 的 表单 脚本 〈 请 查阅 虚拟 主机 技术 文档 了 解 相关 信 
息 ) 。 另 一 方面 ， 也 可 以 使 用 自己 或 他 人 编写 的 用 于 处 理 表单 数据 的 服务 器 端 脚本 。 通 常 ， 
人 们 使 用 PHP、Perl、Ruby 等 语言 来 编写 处 理 表单 的 脚本 。 例 如 ， 使 用 这 类 脚本 ， 可 以 发 
出 包含 表单 信息 的 电子 邮件 ， 或 是 将 表单 信息 输入 数据 库 ， 供 日 后 使 用 。 

编写 一 个 服务 器 端 脚本 ， 或 是 介绍 如 何 编写 服务 器 端 脚 本 的 代码 ， 这 已 超出 了 本 课程 
的 范围 。 用 户 可 以 咨询 虚拟 主机 提供 商 ， 他 们 可 提供 服务 器 端 脚 本 ， 或 请 教 专业 编程 员 。 
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如 果 用 户 想 深入 了 解 服务 器 端 脚本 ， 可 以 访问 以 下 一 些 网 络 资源 ; 
(1) Perl: http://www.perl.com 
(2) PHP: http://www.php.net 
(3) Ruby: http://www.ruby-lang.org 
(4) Sendmail: http://www.sendmail.org 
(5) ASPNET: http://www.asp.net 
当 用 户 在 提交 表单 后 不 知道 下 一 步 究 竟 该 怎么 做 ， 是 一 件 很 蓝 坎 的 事 。 此 时 把 用 户 习 


副 


新 定向 到 一 个 包含 “下 一 步 怎么 做 ” 的 链接 网 页， 一 定 能 大 大 改善 用 户 体验 。 


11.8 综合 实例 


继续 综合 实例 网 站 制作 ， 添 加 一 个 联系 我 们 的 网 页 ， 其 中 包括 文本 框 、 提 交 按钮 等 控 
具体 代码 如 下 : 


<div id="page content right"> 
<div class="title"> 
&nbsp; <p><font face=" 黑 体 "> 联系 我 们 </font></div> 
<p><font face=" 宋 体 " color="#000000" style="font-size: 11pt">gnbsp; 
&nbsp; 
如 果 您 有 好 的 建议 请 联系 我 们 </font></p> 
<div id="login" style="width: 193px; height: 206px"> 
<font face=" 黑 体 "> 姓名 </font><label>:</label> 
<input type="text" name="user" class="input" /> 
<div class="clear"></div> 
<label><font face=" 黑 体 "> 电话 </font>:</label> 
<input type="text" name="sdfg" class="input"/> 


<div class="clear"></div> 
<label><font face=" 黑 体 ">Email</font>:</label> 
<input type="text" name="payuity" class="input"/>gnbsp; 


<div class="clear"></div> 
<font face=" 黑 体 "> 具 体 信 息 </font><label>:</label> 


<textarea name="text" cols="" rows="" class="textarea"></textarea> 


<div class="clear"></div> 
<div style="padding-left:90px;"> 
<div class="right" style="width: 36px; height: 20px"> 


<p> 

<input type="submit" name="Submit" value=" 提 交 "></div> 
</div> 

</div> 


运行 代码 后 如 图 11-15 所 示 。 
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上 mmP 一 


.184。 


GO Br hel 国 [9]ix] [Bs 


俱 站 | 大 Fiss 从 " 辐 ”各 了 舍 名 + 合 IU 


工作 人 员 全 相关 交 下 


用 户 反 包 
担 对 站 站 提出 功能 寻 议 ? : 联系 我 们 


改观 了 同 页 中 的 问题 昌 周 放 革 人 了 如 果 您 有 好 的 建议 请 联系 我 们 
和 还 是 其 他 网 友 示 经 你 的 化 许 近 让 上 传 了 他 的 一片 文字 ? 


调 硬 邮箱 : 123@123.com 把 你 想 说 的 一 切 几 诉 我 人 E49 


商务 合作 
其 开 与 开 在 内 容 、 品 外 或 其 地 层面 上 开展 合作 了 
无 他 是 各 游 局 、 商 家 下 电机 构 
部 了 系 方 式 发 送 至 朗 东 :123@123 col 
与 你 起， 咸 台 亿 万 你 行 老 的 滞 一 次 放行， 


图 11-15 添加 表单 


11.9 ”高 手 训练 营 


表单 的 数据 传输 方式 有 哪些 ? 

提交 按钮 和 普通 按钮 的 区 别 ? 

如 何 添加 下 拉 菜 单 并 控制 其 大 小 ? 

创建 一 个 要 求 用 户 提交 姓名 、 电 子 邮件 地 址 、 评 论 的 简单 表单 。 

综合 运用 表单 的 控件 及 其 属性 操作 ， 制 作 个 人 注册 网 页 。 完 成 后 效果 如 图 11-16 所 示 。 


文件 妈 ”编者 人 E 查看 如 收 蕊 次 区。 工具 CL) 帮助 u) 
局 、| 古 mVmm 开 淮 一 让 式 学 刁 \ 午 二 一 埋 VW 了 司 | 六 六 


芥 - 回 中 " 呈 m0 登 IRD- 


您 的 年 龄 层 是 ? 
〇 16 周岁 以 下 Ol7-22 周岁 D23-28 周岁 口 25 周岁 以 上 


您 个 人 的 妥 好 有 : 
口交 友 口上 网 口 看 书 口 禾 球 口 游戏 口 其 他 


对 


11-16 ”效果 图 
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框架 技术 可 以 将 浏览 器 分 割 成 多 个 小 窗口 ， 并 且 在 每 个 小 窗口 中 ， 可 以 显示 不 同 的 网 
页 ， 这 样 用 户 就 可 以 很 方便 地 在 浏览 器 中 浏览 不 同 的 网 页 效果 。 

当 浏 览 器 分 割 成 多 个 窗口 后 ， 各 窗口 就 会 扮演 不 同 的 角色 ， 实 现 不 同 的 功能 。 举 例 来 
说 ， 有 些 论坛 就 是 把 浏览 器 分 割 成 两 个 窗口 : 一 个 窗口 主要 来 显示 帖子 的 标题 ， 另 一 个 窗 
口 会 显示 有 具体 的 内 容 。 这 样 的 设计 显然 比 起 一 个 窗口 的 网 页 在 浏览 时 方便 得 多 ， 而 且 用 户 
也 可 以 任意 切换 题目 。 


框架 的 基本 结构 
设置 框架 的 大 小 和 边框 
设置 子 窗口 属性 

设置 浮动 框架 的 大 小 和 对 齐 方 式 


nm 


12.1 框架 的 基本 结构 


框架 的 基本 结构 主要 分 为 框架 和 框架 集 两 个 部 分 。 
在 HTML 中 用 <frame> 标 签 与 <framesef 标 签 来 定义 框架 结构 。 其 中 ，<frame> 标 签 用 
于 定义 框架 ， 而 <framesef> 标 签 则 用 于 定义 框架 集 。 其 语法 为 : 


<html> 

<head> 
<title> 框 架 的 基本 结构 </title> 
</head> 

<frameset .…> 

<frame .> 

</frameset> 

</html> 


从 上 述 代 码 中 可 以 看 出 , <frameset> 标 签 是 成 对 出 现 的 , 以 <frameset> 开 始 , </frameset> 
结束 ， 且 在 框架 网 页 中 <framesef> 代 替 了 <body> 标 签 ， 因 此 ， 框 架 页 中 不 能 包含 <body> 标 
签 。 而 <frame> 标 签 是 单独 出 现 的 。 
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1. 框架 的 优点 

(1) 重 载 页 面 时 不 需要 重 载 整个 页 面 ， 只 需要 重 载 页 面 中 的 一 个 框架 页 (减少 了 数 
据 的 传输 ， 增 加 了 网 页 下 载 速度 ) 。 

(2) 方便 制作 导航 栏 。 

2. 框架 的 缺点 

(1) 会 产生 很 多 页 面 ， 不 容易 管理 。 

(2) 不 容易 打印 。 

(3) 多 框架 的 页 面 会 增加 服务 器 的 http 请 求 。 


12.2 ”框架 集 的 属性 


常见 的 对 窗口 的 分 割 包括 : 水 平分 割 、 垂 直 分 割 和 媒 套 分 割 。 具 体 采 用 哪 种 分 割 方式 ， 
取决 于 实际 需要 。 下 面 学 习 它 的 具体 属性 。 


12.2.1 水 平分 割 窗 口 属 性 一 一 rows 


浏览 器 的 窗口 可 以 上 下 水 平地 分 割 成 数 个 窗口 ， 只 需要 定义 每 个 窗口 所 占 的 比例 即 
可 。 水 平分 割 窗 口 是 用 “rows” 属 性 来 定义 的 。 它 的 属性 值 代表 各 子 窗口 的 高 度 ， 第 一 个 
子 窗口 高 为 “高 度 1”， 第 二 个 子 窗 口 高 为 “高 度 2”， 依 此 类 推 ， 而 最 后 一 个 为 “*”， 
则 代表 最 后 一 个 子 窗口 的 高 度 ， 值 为 其 他 子 窗口 高 度 分 配 后 所 剩余 的 高 度 。 设 置 高 度数 值 
的 方式 有 两 种 : 

(1) 采用 整数 设置 ， 单 位 为 像素 。 其 语法 为 : 

<frameset rows="100,200,*"> 

</frameset> 


(2) 用 百分比 设置 。 其 语法 为 : 


<frameset rows="20%,50%,*"> 


</frameset> 
实例 12-1: 设置 窗口 的 水 平分 割 


<html> 
<head> 
<title> 采 用 整数 设置 窗口 的 水 平分 割 </title> 
</head> 
<frameset rows="80,120,*"> 
<frame> 


<frame> 
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<frame> 
</frameset> 
</html> 


运行 代码 后 效果 如 图 12-1 所 示 。 从 图 中 可 以 看 到 页 面 被 分 割 成 水 平 三 个 窗口 。 


采用 整数 设置 窗口 的 水 手 分 神 - Windows Internet Explorer 
文件 EF) ”编辑 下 ) ”查看 属 ) 收 寮 严 尼 ) 工具 Ct) 才 助 加 ) 
GO- Brum-wsIst-e ny x 

贷 从 | 大 丰 用 闫 ex 到 | | 和信" 目 ” 名 -全 D- 谷 I 上 RD- ” 


图 12-1 设置 窗口 的 水 平分 割 
用 户 可 以 尝试 着 使 用 百分比 来 设置 ， 如 将 主 代码 改 为 以 下 代码 ， 看 看 有 什么 变化 : 


<frameset rows="25%, 50%,25%"> 
<frame> 
<frame> 
<frame> 

</frameset> 


12.2.2 ”垂直 分 割 窗口 属性 一 一 cols 


浏览 器 的 窗口 还 可 以 左右 垂直 地 分 割 成 数 个 窗口 ， 其 属性 用 “cols” 来 定义 ， 属 性 值 
同 “rows” 属 性 值 。 其 语法 为 : 


<frameset cols=" 窗 口 的 宽度 1， 窗口 的 宽度 2, *"> 


</frameset> 
实例 12-2: 使 用 “cols” 属 性 来 垂直 分 割 窗口 


<html> 

<head> 

<title> 采 用 百分比 设置 窗口 的 垂直 分 割 </title> 
</head> 
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<frameset cols="30%,50%,*"> 
<frame> 
<frame> 
<frame> 

</frameset> 

</html> 


运行 代码 后 效果 如 图 12-2 所 示 。 从 图 中 可 以 看 到 页 面 被 分 割 成 垂直 三 个 窗口 。 


采用 百分比 设置 窗口 的 垂直 分 嘎 -Windovs Im 
文件 上 ”编辑 时) 查看 WD 收藏 天 (4) 工具 和 助 0) 


GO Br urs-wtsmt-sm i x | ET, Fs PT 
窜 倪 | 条 条 用 百分比 设置 久 口 的 大 丰 分 众 -" 园 - 蜗 " 世 IO 全 IRAO- 


图 12-2 ”设置 窗口 的 垂直 分 割 


12.2.3 ”多 套 分 割 窗口 


在 实际 应 用 中 ，“ 厂 ” 字 型 框架 使 用 极为 广泛 。“ 厂 ” 字 型 的 网 页 就 是 窗口 中 包含 水 
平和 垂直 分 割 ， 如 图 12-3 所 示 。 


“ 厂 " 字模 框架 -Windows Internet Explorer 
文件 如 编辑 下 查看) 收藏 天 贞 工具 上 帮助 0 
GO Brn- Wt=enF\ | 人 |X| [BE 


帘 会 | 大 “" ER 但" 和 目 剖 - 忆 WD- 全 TARWD-” 


0 


图 12-3 “ 厂 ” 字 型 框架 


实现 “ 厂 ” 字 型 框架 就 需要 对 窗口 进行 嵌 套 分 割 。 其 语法 为 : 


“leg 
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<frameset rows="30%,*"> 
<frame> 

<frameset cols="20%,*"> 
<frame> 
<frame> 

</frameset> 


</frameset> 
实例 12-3: 对 窗口 进行 嵌 套 分 割 


<html> 

<head> 

<title> 窗 口 的 嵌 套 分 割 </title> 

</head> 

<frameset rows="50%,*"> 
<frame> 

<frameset cols="60%,*"> 
<frame> 
<frame> 

</frameset> 

</frameset> 

</html> 


运行 代码 后 效果 如 图 12-4 所 示 。 


窗口 的 度 套 分 荐 - Windows Internet Explorer 
文件 时 编辑 下) 查看 YY) 收藏 严 A) 工具 CY) 帮助 0D) 
GO Br us-wts t= x Dl- 


帘 窑 大 亩 口 的 央 大 分 着 偷 - 园 - 蜗 -四 夯 @- 伟 IO” 


图 124 翌 套 分 割 实 现 “ 厂 ” 字 型 框架 


border 


12.2.4 ”框架 的 边框 大 小 


在 <framese 忆 标签 中 ， 可 运用 “border” 属 性 控制 分 割 窗口 框架 的 边框 大 小 。 框 架 宽 度 
的 单位 为 像素 。 其 语法 为 : 


lbs 
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<frameset border=" 边 框 的 宽度 "> 


</frameset> 
实例 12-4: 设置 窗口 框架 的 边框 


<html> 

<head> 

<title> 设 置 框架 的 边框 </title> 

</head> 

<frameset rows="30%,*" border="20"> 
<frame> 
<frameset cols="20%,*"> 
<frame> 
<frame> 


</frameset> 


</frameset> 
</html> 


运行 代码 后 效果 如 图 12-5 所 示 。 


设置 杠 染 的 边框 - Windows Internet Explorer 
文件 中， 锦 辑 下 ) 查看 W) 收藏 天 人 ) 工具 CD) 帮助 中 
[el 3 | 看 3. 工作 \hnl\ 成 书 \ 第 十 = 章 2. 5 加 | 全 XX 
富安 大 设置 恰当 的 边框 伍 - 目 篇 -ND -使 IAQ@- ” 


图 12-5 设置 窗口 框架 的 边框 


12.2.5 ”框架 的 边框 颜色 一 一 bordercolor 
运用 “bordercolor” 属 性 来 设置 框架 的 边框 颜色 。 其 语法 为 : 


<frameset border=" 颜 色 代 码 "> 


</frameset> 


“Is 
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实例 12-5: 设置 框架 的 边框 颜色 


<html> 

<head> 
<title> 设 置 框架 的 边框 颜色 </title> 
</head> 


<frameset rows="30%,*" border="20" bordercolor="red"> 
<frame> 
<frameset cols="20%, 40%,40%"> 
<frame> 
<frame> 
</frameset> 
</frameset> 
</html> 


运行 代码 后 效果 如 图 12-6 所 示 。 


他 | 编 强人 L】 可 看 (W) 路基 天 () I 上 且 [T) 大 动 
斌 中 屋 天。 部 回 建 Ri 。 尼 本 到 更 多 机 加 横 快 ”到 百 民 
BE RE 的 2E 入 日 动 -页面 @- 


E73 ET 


图 12-6 设置 框架 的 边框 颜色 


12.2.6 ”框架 的 隐藏 

“frameborder ”属性 用 于 控制 窗口 框架 的 周围 是 否 显示 框架 ， 此 属性 可 使 用 在 
<framese 人 标签 与 <fame> 标 签 中 ， 如 果 使 用 在 <frameset> 标 签 中 时 ， 可 控制 窗口 框架 的 所 
有 子 窗口 ， 如 果 用 在 <frame> 标 签 中 时 ， 则 只 能 控制 该 标记 所 代表 的 子 窗口 。 其 语法 为 ; 


<frameset frameborder="0" 或 "1"> 

</frameset> 

图 该 属性 值 只 能 设置 为 "0" 或 "1"。 当 设置 为 "0" 时 ， 表 示 不 显示 边框 ; 设置 为 "1" 时 ， 
示 显 示 边框 ， 默 认 值 为 "1"。 
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12.3 子 窗口 的 设置 


通过 以 上 的 学 习 , 虽然 窗口 已 经 分 割 , 但 仍然 是 空白 框架 ， 本 节 学 习 如 何 使 用 <frame> 
标签 来 定义 每 个 窗口 页 面 要 显示 的 文件 。 


12.3.1 指定 子 窗口 页 面 一 一 src 


“sre” 属 性 是 用 来 指定 要 导入 到 某 个 子 窗口 的 HTML 文件 的 位 置 ， 其 设置 方法 和 前 
面 章 节 介绍 过 的 <img> 标 签 中 “sre” 属 性 的 用 法 相同 。 其 语法 为 : 


<frameset > 
<frame src="html 文件 的 位 置 "> 
</frameset> 


实例 12-6: 设计 一 个 包含 音乐 歌词 的 网 页 ， 并 通过 指定 子 窗口 在 框架 网 页 中 显示 网 页 


9 设计 分 析 

01) 设计 要 按照 “ 厂 ” 字 型 杠 染 来 分 割 页 而 窗口。 那么， 首先 需要 新 建 3 个 相关 内 
容 的 网 页 。 分 别 命名 为 头 部 网 页 html、 左 侧 网 页 .html、 右 侧 网 页 html。 

(2) 将 相应 的 内 容 网 页 重 命名 后 保存 在 框架 集 文件 的 同一 目录 下 。 

(3) 新 建 框架 网 页 ， 并 设置 框架 网 页 的 属性 。 

< 人 程序 代码 

01) 新 建 头 部 的 网 页 。 命 名 为 头 部 网 页 html。 


<html> 

<head> 
<title> 头 部 网 页 </title> 
</head> 

<body> 


<img alt="top.jpg" src="top.jpg" align="left"> 
<font color="blue" size="7"> 音 乐 网 站 </font> 
</body> 

</html> 


(2) 新 建 左 侧 的 网 页 。 命 名 为 左 侧 网 页 .html。 


<html> 

<head> 

<title> 左 侧 网 页 </title> 

</head> 

<body bgcolor="yellow"> 

<a href=" 右 侧 网 页 .html" target="” blank"> 我 的 歌声 里 </a><br/> 
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</body> 
</html> 


(3) 新 建 右 侧 的 网 页 。 命 名 为 右 侧 网 页 .html 


<html> 

<head> 

<title> 右 侧 网 页 .html</title> 
</head> 


<body bgcolor="silver"> 

<p> 没 有 一 点 点 防备 ， 也 没有 一 丝 顾虑 </P> 

<p> 你 就 这 样 出 现在 我 的 世界 里 ， 带 给 我 惊喜 ， 情 不 自己 </p> 

<p> 可 是 你 偏 又 这 样 ， 在 我 不 知 不 觉 中 </p> 

<p> 悄 悄 的 消失 ， 从 我 的 世界 里 ， 没 有 音讯 ， 剩 下 的 只 是 回忆 </p> 
<p> 你 存在 ， 我 深 深 的 脑海 里 ， 我 的 梦 里 ， 我 的 心里 ， 我 的 歌声 里 .. . . . . </p> 
</body> 

</html> 


(4) 新 建 框 架 网 页 。 命 名 为 框架 网 页 .html 


<html> 

<head> 
<title> 框 架 网 页 </title> 
</head> 


<frameset rows="20%,*" frameborder="1"> 
<frame src=" 头 部 网 页 .html"> 

<frameset cols="20%,*"> 

<frame src=" 左 侧 网 页 .html"> 

<frame src=" 右 侧 网 页 .html"> 

</frameset> 

</frameset> 

</html> 


运行 框架 网 页 代码 后 效果 如 图 12-7 所 示 。 


5 ” 忆 和 更 册 二 可 志 ” 国 | 下位 


-有 口 本 ”7 四- 加 - 


你 席 这 样 出 现在 我 的 世界 里 。 带 埠 找 惊喜 ， 傅 不 自己 
可 是 你 痪 又 这 样 ， 在 我 不 知 不 贷 中 
悄悄 的 消失 ， 丛 我 的 世界 里 ， 没 有 间 讯 ， 币 下 的 只 志 回 忆 


图 12-7 指定 子 窗口 在 框架 网 页 中 显 示 网 页 
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12.3.2 ”定义 子 窗口 名 称 一 一 name 


“name” 属 性 用 来 指定 窗口 的 名 称 ， 当 定义 子 窗口 的 名 称 后 ， 可 指定 超 链接 的 目标 显 
示 到 网 页 的 某 个 子 窗口 ， 这 样 可 以 方便 页 面 的 查找 。 其 语法 为 : 


<frame name=" 子 窗口 名 称 "> 


</frameset> 


实例 12-7: 定义 子 窗口 名 称 


<html> 

<head> 
<title> 定 义 子 窗口 名 称 </title> 
</head> 


<frameset rows="20%,*" frameborder="1"> 
<frame src=" 头 部 网 页 .html"” name=" 头 部 "> 
<frameset cols="20%,*"> 

<frame src=" 左 侧 网 页 .html"” name=" 左 侧 "> 
<frame src=" 右 侧 网 页 .html"” name=" 右 侧 "> 
</frameset> 

</frameset> 

</html> 


12.3.3 ”控制 子 窗口 滚动 条 一 一 scrolling 


当 页 面 的 内 容 超过 浏览 器 窗口 大 小 时 ， 页 面 会 自动 添加 滚动 条 来 方便 浏览 网 页 。 
“scrolling” 属 性 用 于 控制 窗口 框架 中 是 否 显示 滚动 条 ， 使 用 此 属性 ， 可 以 避免 HTML 文 
件 因 内 容 过 多 而 无 法 完全 显示 。 


<frame scrolling="yes 或 no 或 auto"> 


实例 12-8: 添加 控制 子 窗口 的 滚动 条 


<html> 

<head> 
<tit1le> 控 制 框架 滚动 条 </title> 
</head> 

<frameset rows="20%,70%,*"> 
<frame scrolling=yes> 
<frame scrolling=no> 

<frame scrolling=auto> 
</frameset> 

</html> 
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运行 框架 网 页 代码 后 效果 如 图 12-8 所 示 。 


控制 框架 滚动 条 - Windows Internet Ezplorer 


文件 下 ) 编辑 人 E) 查看 收 套 夹 人 工具 民 ) ”帮助 加 
GO Bru t=-anra ||x| [BE 


实 安 | 大 控 ME 滚动 条 | 从- 目 - 昭 - 忆 中 - 合 IRO-” 


图 12-8 ”添加 控制 子 窗口 的 滚动 条 


12.3.4 调整 子 窗口 的 尺寸 


noresize 


前 面 学 习 了 如 何 运 用 <frameset> 标 记 的 “rows” 和 “cols” 属 性 来 水 平 或 垂直 分 割 窗 口 。 


但 设置 后 ， 各 窗口 框架 的 大 小 并 非 固定 无 法 更 改 ， 如 果 想 更 改 窗口 框架 大 小 时 ， 可 
标 指针 移 到 要 更 改 的 框架 上 ， 待 指针 呈现 双 箭头 符号 时 ， 再 用 鼠标 进行 拖 搜 ， 就 可 


口 的 大 小 。 


以 将 鼠 


当然 如 果 不 希 望 用 户 能 随意 地 改变 子 窗口 的 大 小 ， 这 时 可 以 在 <fame> 标 签 中 ， 添 加 


“noresize” 属 性 ， 其 语法 如 下 : 
<frame src="” html 文件 的 位 置 " noresize > 
实例 12-9: 调整 子 窗口 的 尺寸 


<html> 

<head> 
<title> 调 整 子 窗口 的 尺寸 </title> 
</head> 

<frameset rows="20%,70%,*"> 
<frame src="top.jpg" noresize > 
<frame> 

<frame> 

</frameset> 

</html> 


运行 框架 网 页 代码 后 效果 如 图 12-9 所 示 。 


SI 


HTMI/CSS 网 页 设计 与 开发 一 站 式 学 习 一 一 难点 /案例 /练习 


调整 子 窗口 的 尺寸 - Windows Internet Explorer 
回回” | 站 7 Um 发 -站 式 学 可 M2\erple 12-9 htal 国 [s|[x] [Ps 
EE 编辑 外 查看 如 收 基 天内， 工具 中 帮助 四 
穴居 癌 回 于 8 ”可 表 了 更 隐 加 要 次 。 | 


| 感 调 世子 宇 的 十 


图 12-9 添加 控制 子 窗口 的 滚动 条 
当 鼠 标 移 至 项 部 框架 边框 的 边框 上 时 ， 鼠 标 不 会 变 成 “1 ”形状 ， 也 无 法 拖 动 边框 。 
12.3.5 ”设置 子 窗口 的 边 距 一 一 margin 


框架 和 网 页 一 样 也 可 设置 边 距 。 边 框 与 页 面 的 边 距 可 以 通过 “margin” 属 性 来 设 定 ， 
利用 <frame> 标 签 中 的 “marginwidth” 属 性 来 设置 框架 左右 边缘 的 宽度 ，“marginheight” 
属性 来 设置 框架 上 下 边缘 的 宽度 。 其 语法 为 : 


<frame src="” html 文件 的 位 置 " marginwidth=" 水 平 间 距 "marginheight=" 垂 直 间 距 "> 


四 在 HTML 文件 中 ， 利 用 框架 <frame> 标 签 中 的 “marginwidth” 和 “marginheight” 
属性 可 以 设置 相应 子 窗口 的 左右 和 上 下 边缘 的 空白 ， 单 位 是 像素 。 


实例 12-10: 首先 新 建 一 个 example_12-10.html 页 面 ， 内 容 为 景点 介绍 


<html> 

<head> 

<title> 景 点 介绍 </title> 

</head> 

<body bgcolor="silver"> 

<p> 在 彩云 之 南 ， 在 遥远 的 云 岭 深 处 ， 有 一 个 美丽 神奇 的 地 方 -- 丽 江 。 这 里 民风 淳朴 ， 雄 奇 俊美 的 
自然 景观 让 你 流连 忘 返 ， 独 特 奇异 的 民族 风情 ， 使 你 目不暇接 ， 心 酬 神 迷 。 明 媚 的 阳光 ， 美 丽 
的 白云 ， 圣洁 的 雪山 ， 梦 幻 般 的 政 湖 ， 处 处 充满 了 诗情画意 ……</p> 

</body> 

</html> 


然后 创建 框架 网 页 。 代 码 如 下 : 


“Gs 
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<html> 

<head> 
<title> 框 架 网 页 </title> 
</head> 


<frameset cols="50%,*"> 

<frame src= 玉 龙 雪 山 .jpg name= 图 片 > 

<frame src=example 12-10.html marginheight=100 marginwidth=50> 
</frameset> 

</html> 

</html> 


运行 框架 网 页 代码 后 效果 如 图 12-10 所 示 ， 文 本 的 内 容 和 边框 之 间 设 置 了 相应 的 空 


框架 网 页 - Windows Internet Explorer 
文件 下) ”编辑 下 ) 查看 WW) 收藏 夹 W) 工具 人 玫 助 0D 
加 ， Br mi 人 += X 
帘 安 大 { 和 页 偷 " 园 - 邮 " 辐 76 口 " 合 IRO- 


HT 


在 彩云 之 南 ， ee 


图 12-10 添加 控制 子 窗口 的 滚动 条 


124 浮动 框架 


在 浏览 网 页 时 ， 常 常会 看 到 在 浏览 器 窗口 含有 单独 的 子 窗口 ， 这 就 是 浮动 框架 。 插 入 
浮动 框架 要 使 用 双 标签 <iffame>、</ 过 ame>, 与 框架 不 同 的 是 , 浮动 框架 可 以 包含 在 <body> 
标签 中 。 


12.4.1 页 面 源 文件 属性 一 一 src 
同样 ， 用 户 用 “src” 属 性 来 设置 框架 中 显示 文件 的 路 径 ， 该 属性 必须 设置 。 其 语法 为 : 


<iframe src=" 浮 动 框架 页 面 源 文件 位 置 "></iframe> 


= 
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实例 12-11: 添加 浮动 框架 网 页 
(1) 新 建 一 个 内 容 网 页 。 命 名 为 example_12-11.html。 


<html> 

<head> 

<title> 内 容 网 页 </title> 

</head> 

<body> 

<p><img alt=" 泰 回 " src=" 泰 回 .jpg" width=150 align="left">&nbsp; &nbsp; &nbsp; 
&nbsp; <font color="red" size=4> 商 业 成 功 人 士 徐 朗 (徐峥 饰 ) 用 了 四 年 时 间 发 明了 
一 种 叫 “ 油 霸 ” 的 神奇 产品 ， 每 次 汽车 加 油 只 需 加 到 三 分 之 二 ， 再 滴 入 2 滴 “ 油 霸 ”， 油 箱 的 
汽油 就 会 变 成 满 满 一 箱 ， 徐 朗 的 同学 ， 兼 项 目 有 分 歧 的 竞争 对 手 高 博 〈 黄 渤 饰 ) 想 把 这 个 发 明 
一 次 性 卖 给 法 国人 。 但 徐 朗 坚决 不 同意 ， 他 希望 深入 开发 研究 ， 卖 给 纯度 风 投 公司 ， 把 “ 油 堪 ” 
发 扬 光 大 ， 得 到 更 远 的 收益 ， 两 个 人 各 打 己 见 ， 争 论 不 休 ， 一 直 无 果 ; 由 于 两 人 股份 相同 ， 唯 
有 得 到 公司 最 大 股东 周扬 的 授权 书 ， 方 可 达到 各 自 目 的 ， 当 得 知 周扬 在 泰国 后 ， 徐 朗 立 刻 启程 
寻找 ;而 高 博 获悉 后 将 一 枚 跟踪 器 放 在 徐 朗 身上 一 起 去 了 泰国 ， 飞 机 上 ， 徐 朗 遇 到 了 王 宝 〈 王 
宝 强 饰 ) ， 别 有 心机 地 徐 朗 想 利用 他 来 摆脱 对 手 高 博 的 追赶 ， 可 他 不 仅 没 甩 掉 王 宝 ， 还 成 了 他 
的 “贴身 保姆 ”…… 究竟 徐 朗 和 高 博 谁 会 最 终 拿 到 周扬 的 授权 书 ? 而 三 个 各 怀 目的 的 人 ， 又 将 
带 来 一 段 如 何 爆笑 的 泰国 神奇 之 旅 。</font></p> 

</body> 

</html> 


(2) 添加 一 个 浮动 框架 页 面 。 命 名 为 浮动 框架 网 页 .html。 


<html> 

<head> 

<title> 添 加 一 个 浮动 框架 页 面 </title> 

</head> 

<body> 

<center><font color="blue" size=6> 人 再 回 途 之 泰 回 </font></center> 

<hr size="10" noshade="noshade"/> 

<p>&gnbsp; gnbsp; gnbsp; gnbsp; 光线 影 业 出 品 ， 徐 峥 首次 自 编 、 自 导 、 自 演 的 喜剧 电影 《人 再 
回 途 之 泰 回 》 于 2012 年 12 月 12 日 公映 。2010 年 ， 徐 峥 和 王宝强 在 《人 在 回 途 》 中 的 超 回 
春运 回 家 路 笑 翻 全 国人 民 ， 人 尽 皆 知 ， 两 人 由 此 成 为 “年 度 最 强 喜剧 组 合 ”。 这 次 “ 回 途 ” 组 
合 将 再 上 “ 粮 心 之 旅 ”， 还 有 黄 渤 加 盟 ，“ 三 人 行 ” 跨 出 国门 远 赴 热 带 风情 浓郁 的 泰国 ， 一 路 
遭遇 “敌人 ”狙击 ， 上 演 泰 国 冒 险 传奇 。 影 片 至 上 映 以 来 受到 观众 极力 热 捧 ， 被 赞 为 “年 度 最 
好 笑 喜 剧 ”， 上 映 5 天 票房 突破 3 亿 ， 创 造 华语 片 首 周 票房 纪录 ， 上 映 一 个 月 票房 达到 12 亿 ， 
观 影 人 次 超过 3600 万 人 ， 成 为 华语 片 票 房 冠军 。</p> 

<h3 align="left"> 剧 情 介 绍 </h3> 


<iframe src="example 12-11.html"> 


</iframe> 
</body> 
</html> 


运行 浮动 框架 网 页 后 ， 效 果 如 图 12-11 所 示 ,。 
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应 加 一 个 浮动 框架 页 面 ~- Windows Internet Explorer 


ero nt TIE 
文件 中” 编 得 加 ”查看 如” 收 苹 天 册 工具 中 帮助 吕 
请 收 诚 天 | 高 同 建 议 网 站 。 局 获取 更 多 附加 模块 ” [| 百度 


| 辣 应 加 一 个 浮动 民 页 面 丛 - 国 - 写 雪 -而 中 - 安全- I 上 RW- ” 


人 再 回 途 之 泰 回 


光线 影 业 出 品 ， 徐 凰 首次 自 编 、 自 导 、 上 这 扩 吉 条 二 “得 站 过 和 六 ei 公映 。2010 年 ， 条 巍 和 王 宝 
ke AE 中 的 相同 着 运 加 家 品类 间 全 国人 民 ， 人 尽 这 次 “ 回 途 ”组 合 将 再 上 
还 有 人 行 ” 并 出 从 从 庆生 | 庆生” 一 路 i 有 上 演 泰国 冒险 传奇 。 影 片 
二 被 芝 为 “年 度 最 好 笑 喜剧 ”， 上 映 5 天 票房 突破 3 亿 ， 创 造 华语 片 首 周 票房 纪录 ， 上 映 一 个 月 票房 达 
到 12 亿 ， 观 影 人 次 超过 3600 万 人 ， 成 为 华语 片 票房 冠军 。 


剧情 介绍 


要 = 要 


所 加 


是 我 的 电脑 > R00% > 
图 12-11 浮动 框架 页 面 


12.4.2 ”设置 浮动 框架 的 大 小 属性 一 一 width、height 


从 图 12-11 中 就 能 看 出 ， 插 入 页 面 的 浮动 框架 大 小 不 合适 ， 需 要 进行 调整 。 
调整 大 小 是 浮动 框架 的 特有 属性 。 因 为 在 框架 结构 中 ， 框 架 即 是 整个 浏览 器 的 窗口 ， 
所 以 不 需要 设置 大 小 。 而 浮动 框架 是 插入 在 页 面 中 的 ， 可 以 通过 “width” 和 “height” 属 
性 来 调整 浮动 框架 的 大 小 ， 属 性 值 是 像素 。 其 语法 为 : 


<iframe src=" 浮 动 框架 页 面 源 文件 的 位 置 " width=" 框 架 的 宽度 "” height=" 框 架 的 高 度 


"></iframe> 


实例 12-12: 在 实例 12-11 中 浮动 框架 网 页 页 面 的 基础 上 ,调整 浮动 框架 的 大 小 ， 以 达 
到 较 好 的 显示 效果 


<html> 

<head> 

<title> 设 置 浮动 框架 的 大 小 </title> 

</head> 

<body> 

<center><font color="blue" size=6> 人 再 回 途 之 泰 回 </font></center> 

<hr size="10" noshade="noshade"/> 

<p>gnbsp; gnbsp; gnbsp; gnbsp; 光线 影 业 出 品 ， 徐 峥 首次 自 编 、 自 导 、 自 演 的 喜剧 电影 《人 再 
回 途 之 泰 回 》 于 2012 年 12 月 12 日 公映 。2010 年 ， 徐 峰 和 王宝强 在 《人 在 回 途 》 中 的 超 回 
春运 回 家 路 笑 翻 全 国人 民 ， 人 尽 皆 知 ， 两 人 由 此 成 为 “年 度 最 强 喜剧 组 合 ”。 这 次 “ 回 途 ”组 
合 将 再 上 “ 糟 心 之 旅 ”， 还 有 黄 渤 加 盟 ，“ 三 人 行 ” 跨 出 国门 远 赴 热 带 风情 浓郁 的 泰国 ， 一 路 
遭遇 “敌人 ”狙击 ， 上 演 泰国 冒险 传奇 。 影 片 至 上 映 以 来 受到 观众 极力 热 捧 ， 被 赞 为 “年 度 最 
好 笑 豆 剧 ”， 上 映 5 天 票房 突破 3 亿 ， 创 造 华语 片 首 周 票房 纪录 ， 上 了 映 一 个 月 票房 达到 12 亿 ， 


Ee 
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观 影 人 次 超过 3600 万 人 ， 成 为 华语 片 票房 冠军 。</p> 
<h3 align="left"> 剧 情 介绍 </h3> 
<iframe src="example 12-11.html" width="700" height="300"> 


</iframe> 

</body> 

</html> 

运行 代码 后 效果 如 图 12-12 所 示 。 


设置 浮动 框架 的 大 小 


Windows Internet Explorer 


阿 鲜 加 n um 开发-M 式 学 3\lzvexwple_l2-llvemrle12 [$x | | Pl- 
| 文件 四 屿 辑 查看 收藏 天 工具 I) 各 助 
次 收 基 | 高 辐 建 月 沾 ”局 获取 更 多 附加 模块 ”图 百度 


后 设 置 江 动 框架 的 大 小 但 "- 国 - 口 师 -WD IR DO “ 


之 泰 回 


人 再 回 途 : 


光线 影 业 出 品 ， 入 巍 首 次 自 编 、 自 导 、 自 演 的 喜剧 电影 《人 再 固 还 之 奉 固 》 于 2012 年 12 月 12 日 公映 。2010 年 ， 称 峥 和 王 宝 
强 在 《人 在 固 途 》 中 的 超 固 春运 回 家 路 笑 翻 全 国人 民 ， 人 尽 和 知 ， 两 人 由 此 成 为 “年 度 景 强 喜 剧组 合 ”。 这 次 “ 固 途 ”组 合 将 再 上 
“精心 之 旅 ”， 还 有 黄 渤 加 盟 ，“ 三 人 行 ” 跨 出 国门 远 赴 热带 风情 浓郁 的 泰国 ， 一 路 遭遇 “敌人 ” 狂 击 ， 上 演 泰 国 冒 险 传奇 。 影 片 
至 上 映 以 来 受到 观众 要 力 热 挤 ， 被 赞 为 “年 度 最 好 笑 喜 剧 ”， 上 映 5 天 票房 突破 3 亿 ， 创 造 华语 片 首 周 票房 纪录 ， 上 映 一 个 月 票房 达 
到 12 亿 ， 观 影 人 次 超过 3600 万 人 ， 成 为 华语 片 票房 冠军 。 


剧情 介绍 


ed Se 全 
者 ”的 神 背 产品 每 次 汽车 加 油 只 需 加 到 三 分 之 二 ， 青 消 “ 油 
新 ”， 油 箱 的 汽油 就 会 变 成 满 满 -过 站 
人 国人 。 但 徐 朗 坚决 


下 开发 研究 ， A 把 “ 油 竹 "发扬 
光大 ， 得 到 更 远 的 收 WU 争论 不 休 ， 一 直 无 采 ， 由 于 两 人 股份 相同 ， 唯 有 得 
ty 方 可 达到 各 自 目的 ， 当 得 知 周扬 在 泰国 后 ， 徐 朗 立 刻 启 程 寻 
找 ， 而 et 徐 朗 过 到 了 王 宝 〈 王 宝 
Ee 别 有 站 高 博 的 追赶， 可 他 不 仅 没 甩 掉 王 宝 ， 还 成 了 他 
的 “贴身 保姆 ” i a 个 各 怀 目的 的 人 ， 又 
将 带 来 一 他 向 音 实 的 四 光 革 过 让， | 
完成 由 


图 12-12 设置 浮动 框架 的 大 小 


12.4.3 ”设置 浮动 框架 的 对 齐 方式 一 一 align 
浮动 框架 网 页 还 有 一 个 特有 的 属性 就 是 设置 它 的 对 齐 方 式 。 其 语法 为 : 
<iframe src=" 浮 动 框架 页 面 源 文件 的 位 置 " align=" 对 齐 方式 ">></iframe> 


实例 12-13: 继续 在 上 面 例子 的 基础 上 ， 设 置 浮动 框架 的 对 齐 方式 ， 以 达到 较 好 的 显 
示 效 果 


<html> 

<head> 

<title> 设 置 浮动 框架 页 面 的 对 齐 方式 </title> 
</head> 

<body> 


"200 
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<center><font color="blue" size=6> 人 再 回 途 之 泰 回 </font></center> 

<hr size="10" noshade="noshade"/> 

<p>gnbsp; &nbsp; &nbsp; gnbsp; 光线 影 业 出 品 ， 徐 峥 首次 自 编 、 自 导 、 自 演 的 喜剧 电影 《人 再 
回 途 之 泰 回 》 于 2012 年 12 月 12 日 公映 。2010 年 ， 徐 峰 和 王宝强 在 《人 在 回 途 》 中 的 超 回 
春运 回 家 路 笑 翻 全 国人 民 ， 人 尽 皆 知 ， 两 人 由 此 成 为 “年 度 最 强 喜 剧组 合 ”。 这 次 “ 回 途 ”组 
合 将 再 上 “ 糟 心 之 旅 ”， 还 有 黄 渤 加 盟 ，“ 三 人 行 ” 跨 出 国门 远 赴 热 带 风情 浓郁 的 泰国 ， 一 路 
遭遇 “敌人 ”狙击 ， 上 演 泰 国 冒险 传奇 。 影 片 至 上 映 以 来 受到 观众 极力 热 捧 ， 被 赞 为 “年 度 最 
好 笑 喜剧 ”， 上 映 5 天 票房 突破 3 亿 ， 创 造 华语 片 首 周 票房 纪录 ， 上 了 映 一 个 月 票房 达到 12 亿 ， 
观 影 人 次 超过 3600 万 人 ， 成 为 华语 片 票房 冠军 。</p> 

<h3 align="left"> 剧 情 介绍 </h3> 

<iframe src="example 12-11.html" width="700" height="300" align="center"> 

</iframe> 

</body> 

</html> 


运行 代码 后 效果 如 图 12-13 所 示 。 


设置 浮动 框 膝 页面 的 对 齐 方式 


Ee 


[er 四 0; WTML 开 发 一 站 式 学 习 \12\exwmple_12-l1\exwnple_12 S$» x | | 

文件 如” 妨 名 如 ”查看 WD 收 富 天 工具 中 帮助 

富 必 三 天 | 高 回填 网 站 ”已 获取 更 多 附加 模块 ”加 百度 

着 设置 主动 民 架 页 面 的 对 卉 方式 芥 - 同 -本 唤 夯 四 ”安全 旬 -工具 DO - 加 ” 


人 再 回 途 之 泰 回 


光线 影 业 出 品 ， 镶 巍 首 次 自 编 、 自 导 、 riper et 2010 年 ， 笨 凰 和 王 宝 
强 在 《人 在 固 途 》 Gi ye 人 尽 篇 知 ， 两 人 | 度 最 强 喜 | Be 这 次 “| 
“精心 之 旅 ”， 还 有 黄 潮 加盟， 出 国门 人 全 一 Re ,上 : 
至 上 映 以 来 受到 疯 从 根 力 热 挤 ， | 和 好 愉 时 ， 上 映 5 天 票房 突破 3 亿 ， 和 上 映 一 个 月 票房 达 
到 12 亿 ， 观 影 人 次 超过 3600 万 人 ， 成 为 华语 片 票房 冠军 。 


,商业 成 功 人 士 徐 朗 (徐峥 饰 ) 二 发 明了 一 种 叫 “ 油 
再 泣 入 2 泣 “ 油 
a eT 
人 但 徐 朗 坚决 


全 油 暮 ” 
两 人 开机 只 
天 入 和 家 四 条 关 了 则 富生 
世人 人生 一 起 去 了 素 国 ， 人 徐 朗 过 到 了 王 宝 〈 王 宝 
徐 朗 想 利用 他 来 搜 脱 对 手 高 博 的 追赶 ， 可 他 不 仅 没 甩 掉 王 宝 ， 还 成 了 他 
外 i 而 三 个 各 怀 目的 的 人 ， 又 
四 之 采 全 自如 向 爆 实 的 四 他 和 了 


图 12-13 设置 浮动 框架 的 对 齐 方 式 


12.5 难点 解析 


本 章 难 点 是 框架 的 嵌 套 ， 它 可 以 实现 网 页 的 分 层 来 更 好 地 规划 页 面 ， 而 对 于 一 些 低 版 
本 的 浏览 器 , 如果 并 不 支持 框架 结构 的 话 ， 就 无 法 打开 框架 页 面 。 用 于 可 以 通过 “noframe” 
标签 〈 不 支持 框架 标签 ) 来 设置 相应 的 提示 内 容 或 图 片 ， 来 告知 访问 者 浏览 器 无 法 打开 杠 
架 页 面 。 其 语法 如 下 : 


ls 
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<html> 
<head> 
<title> 标 题 </title> 
</head> 
<frameset .> 
<frame .> 
<noframe> 
提示 的 文字 内 容 
</noframe> 
</frameset> 
</html> 


下 面 来 看 一 个 经 典 的 框架 谋 套 实例 , 它 定义 了 三 行 两 列 的 框架 。 一 个 页 面 通常 分 为 上 、 
下 部 ， 而 中 部 又 分 为 左 侧 导航 与 右 侧 内 容 。 这 段 代码 加 上 了 <noframe> 标 签 代码 : 


<html> 

<head> 
<title> 框 架 柑 套 综合 实例 </title> 
</head> 


<frameset rows="20%, *, 15%"> 
<frame src="http://www.baidu.com" /> 
<frameset cols="20%, *"> 
<frame src=" http://www.suhu.com "/> 
<frame src=" http://www.goole.com "/> 
</frameset> 
<frame src=" http://www.sina.com "/> 
<noframes> 
<body> 
<p> 我 的 网 站 使 用 了 框架 技术 ， 但 是 您 的 浏览 器 不 支持 框架 ， 请 升级 您 的 浏览 器 以 便 正常 
访问 我 的 网 站 。</p> 


</body> 
</noframes> 
</frameset> 
</html> 
12.6 高手 训练 营 
1. 窗口 框架 的 基本 结构 ， 主 要 利用 哪些 标签 实现 ? 
2. 怎样 设置 框架 集 边 框 的 大 小 ? 
3 浮动 框架 有 哪些 特有 属性 ， 语 法 分 别 应 怎样 写 ? 
4. 在 网 页 中 插入 一 个 浮动 框架 ， 大 小 设置 为 400*300， 内 容 为 显示 一 张 图 片 。 
5. 设置 一 个 导航 页 面 。 要 求 : 1. 包 含 框架 结构 ; 2. 实 现 页 面 内 文件 之 间 的 链接 跳 转 。 
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3 设 i 分 析 

1， 首 先 需要 设 定 一 个 框架 集 文件 ， 用 寺 确 定 框架 页 面 的 整体 布局 ， 然 后 为 每 个 框架 
窗口 定义 名 称 。 

2. 建立 导航 页 面 ， 并 设置 导航 页 中 的 超 链接 。 用 户 可 以 运用 <a> 标 签 的 “target” 属 性 ， 
未 指定 显示 链接 网 页 的 子 窗口 【最 关键 的 是 将 导航 页 中 的 各 个 链接 图 片 或 文字 的 目标 打开 
方式 设置 为 在 框架 中 打开 ， 即 将 “targetf” 属 性 值 设 为 框架 窗口 的 名 字 )。 

3 建立 与 框架 结构 相应 的 内 容 网 页 ， 命 名 后 保存 在 框架 集 文件 的 同一 目录 下 。 

4. 运行 导航 页 面 ， 查 看 链接 跳 转 的 效果 。 
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<meta> 是 HTML 语言 中 比较 特殊 的 一 个 标签 ， 主 要 用 来 定义 一 些 HTML 标签 中 没有 
定义 的 文件 信息 ， 这 些 信 息 并 不 是 文件 的 内 容 ， 而 是 文件 本 身 的 信息 。 比 如 ， 就 像 在 Word 
文件 中 ， 除 了 有 文件 内 容 外 ， 还 提供 有 摘要 信息 等 。 


口 表单 的 数据 传输 方式 

口 如 何 添 加 输入 类 控件 

口 添加 各 种 按钮 

口 如 何 设置 菜单 类 控件 的 大 小 


13.1 ”<meta> 标 签 的 组 成 


<meta> 是 <head> 标 签 中 的 一 个 辅助 性 标签 。<meta> 标 签 共 有 两 个 属性 , 分 别 是 “name” 
属性 和 “http-equiv” 属 性 ， 不 同 的 属性 又 有 不 同 的 参数 值 ， 这 些 不 同 的 参数 值 就 实现 了 不 
同 的 网 页 功能 


13.1.1 name 属性 

“name” 属 性 主要 用 于 描述 网 页 ， 与 之 对 应 的 属性 为 “content”，“content” 中 的 内 
容 ， 主 要 是 为 便于 搜索 引擎 查找 信息 和 分 类 信息 用 的 。 其 语法 为 : 

<meta name=" 参 数 " content=" 相 应 的 参数 值 "> 

“name” 属 性 主要 有 以 下 几 种 参数 : 

1. keywords( 关 键 字 ) 

“keywords” 用 来 告诉 搜索 引擎 ， 网 页 的 关键 字 是 什么 。 其 语法 为 : 


<meta name ="keywords" content=" 和 科学， 教育， 政治 .…"> 
2. description( 网 站 内 容 描述 ) 
“description” 用 来 告诉 搜索 引擎 ， 网 站 的 主要 内 容 有 哪些 。 其 语法 为 : 


<meta name="description" content=" "这 个 网 页 内 容 是 : 实时 新 闻 I Cs 
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3. robots( 机 器 人 向 导 ) 
“robots” 用 来 告诉 搜索 机 器 人 哪些 页 面 需要 索 纪 


， 哪 些 页 面 不 需要 索引 。 其 语法 为 
<meta name="robots"” content=" 参 数 "> 

“content” 的 参数 有 all,none,index,noindex,follow,nofollow。 默 认 是 “all”。 

4. author( 作 者 ) 

主要 用 来 标注 网 页 的 作者 。 其 语法 为 : 


< meta name="author" content=" 作 者 @163.com"> 


13.1.2 ”http-equiv 属性 


顾名思义 ，“http-equiv” 相 当 于 http 的 文件 头 作 用 ， 它 可 以 向 浏览 器 传 回 一 些 有 用 信 
息 ， 以 帮助 正确 和 精确 地 显示 网 页 内 容 ， 与 之 对 应 的 属性 仍然 为 “content”，“content” 
中 的 内 容 其 实 就 是 各 个 参数 的 变量 值 。 其 语法 为 : 


< meta http-equiv=" 参 数 ” content=" 参 数 变量 值 ""> 

其 中 “http-equiv” 属 性 主要 有 以 下 几 种 参数 : 

1. expires( 期 限 ) 

可 以 用 于 设 定 网 页 的 到 期 时 间 。 一 旦 网 页 过 期 ， 必须 到 服务 器 上 重新 传输 。 其 语法 为 : 
<meta http-equiv="expires" content="Fri，11 Jan 2013 18:18:18 GMT"> 

2. pragma(cache 模式 ) 


禁止 浏览 器 从 本 地 计算 机 的 缓存 中 访问 页 面 内 容 。 通 过 这 样 设 定 ， 访 问 者 将 无 法 进行 
脱 机 浏览 。 其 语法 为 : 


<meta http-equiv="pragma" content="no-cache"> 


3. refresh( 刷 新 ) 
自动 刷新 并 指向 新 的 页 面 。 其 语法 为 : 


<meta http-equiv="refresh" content=1; URL=" 网 站 地 址 "> 
其 中 的 “1” 是 指 停 留 “1” 秒 钟 后 ， 浏 览 器 自动 刷新 到 URL 网 址 。。 
4. set-cookie(cookie 设 定 ) 


如 果 网 页 过 期 , 那么 存储 的 cookie 将 被 删除 。 时 间 必 须 使 用 GMT 的 格式 。 其 语法 为 : 
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<meta http-equiv="set-cookie" content="cookie" value=" 值 "; expires=Friday, 


11-Jan-2013 18:18:18 GMT; path=/"> 


5. window-target( 显 示 窗口 的 设 定 ) 

强制 页 面 在 当前 窗口 以 独立 页 面 显示 。 用 来 防止 别人 在 框架 里 调用 自己 的 页 面 。 其 语 
法 为 : 

<meta http-equiv="window-target" content=" top"> 

6. content-type( 显 示 字符 集 的 设 定 ) 

设 定 页 面 使 用 的 字符 。 其 语法 为 : 


<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
二 人 2b 
13.2 <meta> 标 签 的 功能 


上 一 节 了 解 了 <meta> 标 签 的 一 些 基 本 组 成 ， 接 着 学 习 <meta> 标 签 的 常见 功能 : 
13.2.1 帮助 主页 被 各 大 搜索 引擎 登录 

<meta> 标 签 的 一 个 很 重要 的 功能 就 是 设置 关键 字 , 来 帮助 用 户 的 主页 被 各 大 搜索 引擎 
访问 ， 以 提高 网 站 的 访问 量 。 在 这 个 功能 中 ， 最 重要 的 是 对 “keywords” 和 “description” 
的 设置 。 因 为 按照 搜索 引擎 的 工作 原理 ， 搜 索引 擎 首先 派出 机 器 人 自动 检索 页 面 中 的 
“keywords” 和 “decription”， 并 将 其 加 入 到 自己 的 数据 库 ， 然 后 根据 关键 词 的 密度 将 网 


站 排序 。 因 此 ， 用 户 必须 设置 好 关键 字 ， 来 提高 页 面 的 搜索 点 击 率 。 下 面 举 一 个 简单 的 例 
子供 大 家 参考 : 


<metaname="keywords" content="HTML 教程 ,HTML 开发 一 站 式 学 习 , 使 读者 迅速 掌握 HTML 
的 精髓 ， 张 剑 等 编写 "二 

<meta name="description" content="HTML 教程 ，HTML 开发 一 站 式 学 习 ， 使 读者 迅速 掌握 
HTML 的 精髓 ， 张 剑 等 编写 "> 


设置 好 这 些 关键 字 后 ， 搜 索引 擎 将 会 自动 把 这 些 关 键 字 添加 到 数据 库 中 ， 并 根据 这 些 
关键 字 的 密度 进行 合理 排序 。 
13.2.2 ” 设 定 页 面 的 默认 语言 

这 是 <meta> 标 签 最 常见 的 功能 ， 其 作用 是 定义 该 网 页 的 语言 。HTML 文件 的 内 容 会 因 
各 国 使 用 的 文字 内 码 而 有 所 不 同 。 当 浏览 者 访问 网 页 时 ， 浏 览 器 会 自动 识别 并 设置 网 页 中 
的 语言 。 例 如 ， 网 页 设置 的 是 简体 中 文 ， 而 浏览 器 是 一 个 默认 不 使 用 简体 中 文 码 的 ， 这 时 
网 页 就 会 呈现 乱码 。 例 如 : 
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<meta http-equiv="content—type" content="text/html; charset=gb2312"> 
该 代码 就 表示 将 网 页 的 语言 设置 成 国标 码 。 
13.2.3 自动 刷新 并 指向 新 的 页 面 


如 果 想 使 自己 的 网 页 能 自动 在 指定 的 时 间 内 去 访问 指定 的 网 页 〈 如 果 是 访问 自己 ， 则 
可 以 在 数秒 后 自动 更 新 ) ， 用 户 可 以 使 用 <meta> 标 签 的 自动 刷新 网 页 的 功能 。 下 面 我 们 来 
看 一 段 代码 : 


<meta http-equiv="refresh" content=2; URL=http://www.baidu.com> 
这 段 代码 可 以 使 当前 某 一 个 网 页 在 2 秒 后 自动 转 到 “www.baidu.com” 页 面 中 去 ， 这 
就 是 <meta> 标 签 的 刷新 作用 ， 在 “content” 属 性 中 ，“2” 代 表 设 置 的 时 间 〈 单 位 为 秒 ) ， 
而 URL 就 是 在 指定 的 时 间 后 自动 连接 的 网 页 地 址 。 
13.2.4 ”实现 网 页 转换 时 的 动画 效果 


使 用 <meta> 标 签 ， 还 可 以 在 进入 网 页 、 离 开 网 页 、 进 入 网 站 、 离 开 网 站 时 通过 不 同 的 
过 程 实现 动画 效果 。 其 语法 为 : 


<meta http-equiv=" 网 页 转换 事件 " content="revealtrans (duration= 参 数 ， 
transition= 参 数 ) "> 


网 页 转换 事件 如 表 13-1 所 示 : 


表 13-1 网 页 转换 事件 


事件 种 类 实现 效果 
age-enter 进入 网 页 
page-exit 离开 网 页 
site-enter 进入 网 站 
Site-exit 离开 网 站 


“duration ”表示 滤 镜 特效 的 持续 时 间 (单位 ， 秒 ) 
“transition” 为 滤 镜 类 型 。 表 示 使 用 哪 种 特效 ， 取 值 为 0 一 23。 取 值 如 表 13-2 所 示 : 
表 13-2 ”transition 取 值 范围 
效果 
和 矩形 缩小 
矩形 扩大 
同形 缩小 
网 形 扩大 
从 下 到 上 刷新 


De 
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( 续 表 ) 
取 值 效果 
和 从 上 到 下 刷新 
6 从 左 到 右 刷 新 
4 从 右 到 左 刷新 
8 竖 百 叶 窗 
9 横 百 叶 窗 
10 错位 横 百 叶 窗 
11 错位 竖 百叶 窗 
这 点 扩散 
13 从 左右 到 中 间 刷 新 
14 从 中 间 到 左右 刷新 
15 从 中 间 到 上 下 
16 从 上 下 到 中 间 
17 从 右 下 到 左上 
18 从 右上 到 左下 
19 从 左上 到 右 下 
20 从 左下 到 右上 
21 横 条 状 
区 竖 条 状 
23 在 以 上 22 种 随机 选择 一 种 


- 旦 上 述 代码 被 加 到 一 个 网 页 中 后 ， 再 进出 页 面 时 就 会 看 到 一 些 特殊 效果 ， 这 个 功能 
其 实 与 FrontPage 中 的 一 样 ， 但 要 注意 所 加 网 页 不 能 是 一 个 框架 网 页 。 


13.2.5 ”控制 页 面 缓冲 


<meta> 标 签 可 以 设置 网 页 到 期 的 时 间 ， 也 就 是 说 ， 当 用 户 在 正 浏览 器 中 设置 浏览 氏 
本 那么 当 浏览 某 一 网 页 ， 而 本 地 缓冲 又 有 时 ， 那 么 浏览 

会 自动 浏览 缓冲 区 里 的 页 面 ， 直 到 <meta> 标 签 中 设置 的 时 间 到 期 ， 这 时 ， 浏 览 器 才 会 
去 取得 新 页 面 。 例 如 , 下面 这 段 代 码 就 表示 网 页 的 到 期 时 间 是 2013 年 1 月 12 日 18 时 18 
分 18 秒 。 


<meta http-equiv="expires" content="Friday, 12-Jan-2013 18:18:18 GMT"> 


13.2.6 ”控制 网 页 显示 的 窗口 


用 户 还 可 以 使 用 <meta> 标 签 来 控制 网 页 显示 的 窗口 ， 只 要 在 网 页 中 加 入 下 面 的 代码 就 
可 以 了 : 
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<meta http-equiv="window-target" content=" top"> 


这 段 代码 可 以 防止 网 页 被 别人 作为 一 个 框架 调用 。 


13.3 难点 解析 


本 章 难 点 是 如 何 合理 地 设置 <meta> 标 签 属性 ， 以 方便 搜索 引擎 的 访问 。 
网 页 <meta> 里 包含 了 网 站 的 标题 、 关 键 词 和 描述 ， 虽 然 一 般 在 前 台 看 不 出 来 ， 但 却 是 
优化 人 员 的 核心 部 分 ， 那 么 如 何 设置 <meta> 信 息 才 能 让 网 站 排名 靠 前 呢 ? 
(1) 不 要 在 “tile”、“description”、“keyword” 里 写 太 多 信息 ， 集 中 突显 网 站 最 
主要 的 核心 关键 词 就 可 以 了 , 越 是 写 得 多 , 关键 词 密度 就 会 被 稀释 ,效果 可 能 就 不 会 太 好 。 
(2) 不 要 将 “description"”、“keyword” 里 面 使 用 同样 的 内 容 ， 这 样 百度 会 认为 是 
营 了 关键 词 ， 这 样 百 度 搜 索引 擎 不 喜欢 重复 出 现 的 内 容 而 影响 网 站 的 优化 排名 。 
(3) “keyword” 关 键 字 一 般 保持 3 个 是 最 好 的 ， 最 多 不 要 超过 4 个 ， 太 多 的 话 对 搜 
索引 擎 并 不 是 很 友好 ， 搜 索引 擎 对 标题 的 索引 字数 一 般 为 30 个 汉字 以 内 ， 对 “description” 
中 的 汉字 一 般 索 引 在 120 个 汉字 以 内 ， 所 以 一 定 要 注意 适度 。 
(4) 描述 “description” 里 面 最 好 是 包含 关键 字 的 概括 性 内 容 。 目 前 百度 降低 了 
“description” 里 的 权重 ， 而 谷歌 则 还 是 很 偏爱 。 

尽管 <meta> 本 身 不 足以 解决 排名 问题 , 但 对 <meta> 标 签 的 属性 设置 仍然 是 搜索 引擎 优 
化 的 基础 工作 。 清 晰 准确 的 <meta> 文 字 与 正文 内 容 的 关键 词 相 呼 应 ， 是 排名 加 分 的 重要 条 
件 之 一 。 


} 


吓 


13.4 综合 实例 


综合 前 面 所 讲 内 容 ， 将 实例 中 的 网 页 加 入 <meta> 标 签 内 容 ， 以 便于 搜索 引擎 查找 本 网 
站 的 信息 。 下 面 网 站 中 各 网 页 的 具体 代码 。 


1. 网 站 首页 的 代码 


<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 网 站 实例 </title> 

<link rel="stylesheet" type="text/css" href="style.css" /> 

</head> 

<body> 

<marquee bgcolor="#FFFF00" height="20" width="1014" style="color: 
#FF0000"><font&gnbsp; color=red> 欢 迎 访 问 我 们 的 网 站 </font></marquee> 


<div id="top menu"> 
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<ul class="menu"> 

<li><a href="index.html" class="nav"> 主 页 </a></1i> 
<1Li><a href="#"” class="nav"> 关 于 我 们 </a></1i> 

<li><a href="#" class="nav"> 工 作 人 员 </a></1i> 

<li><a href="gallery.html"” class="nav"> 相 关 资 源 </a></1i> 
<li><a href="contact.html" class="nav"> 联 系 我 们 </a></1i> 
</ul></div> 


<div id="main content"> 


<div id="top banner"> 


<a href="index.html"><img src="images/l0go.png" width="130" 


height="130" alt="home" title="]logo" border="0" class="1ogo"/></a> 


“2s 


</div> 
<div id="page content left"> 


<div class="title"> 


黑体 "> 欢迎 访问 我 们 的 网 站 </font></div> 
<div class="content text"> 
<span style="color: rgb(102，102，102); font-family: 宋体 ，arial; 


font-size: 12px; font-style: normal; font-variant: normal; font-weight: 


&nbsp; <p><font face= 


normal; letter-spacing: normal; line-height: 24px; orphans: 2; text-align: 
left; text-indent: 0px; text-transform: none; white-space: normal; widows: 
2; word-spacing: Opx; -webkit-text-size-adjust: auto; 
-webkit-text-stroke-width: Opx; background-color: rgb(255, 255, 255); 
display: inline !important; float: none; ">&gnbsp;é&nbsp; 

我 公司 创办 于 2000 年 1 月 ， 是 一 家 面向 旅游 行业 提供 一 体 化 电子 商务 服务 ， 帮 助 传统 旅 
游 企业 实现 在 线 化 的 互联 网 技术 开发 公司 。 公 司 旗下 运营 两 大 平台 : ** 旅 游 网 (B2C 平台 ) ， 
中 国 最 大 的 旅游 产品 预订 平台 ，** 通 (B2B 平台 ) ， 中 国旅 游 同 业 合作 首选 平台 ， 国 内 首 个 实 
名 制 旅游 同行 交流 社区 。</span></div> 

<div class="content text"> 

<img src="images/ 网 站 1.jpg"width="130"height="79" alt="pic"title= 
vic Class="picm /> 

<span style="color: rgb(102，102，102); font-family: 宋体 ，arial; 


font-size: 12px; font-style: normal; font-variant: normal; font-weight: 


normal; letter-spacing: normal; line-height: 24px; orphans: 2; text-align: 
left; text-indent: 0px; text-transform: none; white-space: normal; widows: 
2; word-spacing: Opx; -webkit-text-size-adjust: auto; -webkit-text- 
stroke-width: Opx; display: inline !important; float: none; background- 
color: rgb(255，255，255)">gnbsp;** 旅 游 网 </span><span style="color: 
rgb (102, 102, 102); font-family: 宋体 , arial; font-size: 12px; font-style: 
normal; font-variant: normal; font-weight: normal; letter-spacing: normal; 
line-height: 24px; orphans: 2; text-align: left; text-indent: Opx; 
text-transform: none; white-space: normal; widows: 2; word-spacing: Opx; 
—webkit-text-size-adjust: auto; —webkit-text-stroke-width: Opx; 
background-color: rgb(255, 255, 255); display: inline !important; float: 
none; "> 是 中 国 最 大 的 在 线 旅游 超市 ， 每 天 为 百 万 游客 提供 超过 百 万 条 旅游 线路 及 几 十 万 件 
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单项 旅游 产品 的 预订 服务 ， 旗 下 加 盟 旅 行 社 超过 1 万 家 ， 遍 布 全国 ! </span></div> 

<div class="title"> 

<img src="images/ 网 站 2.jpg"width="130"height="79" alt="pic"title= 
picwerass pc /> 

</div> 

<div class="content text"> 

<span style="color: rgb(102，102，102); font-family: 宋体 ，arial; 
font-size: 12px; font-style: normal; font-variant: normal; font-weight: 
normal; letter-spacing: normal; line-height: 24px; orphans: 2; text-align: 
left; text-indent: 0px; text-transform: none; white-space: normal; widows: 
2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text— 
stroke-width: Opx; display: inline !important; float: none; background- 
color: rgb(255, 255, 255)">tnbsps 

xx 通 </span><span style="color: rgb(102，102，102); font-family: 宋 
体 ，arial; font-size: 12px; font-style: normal; font-variant: normal; 
font-weight: normal; letter-spacing: normal; line-height: 24px; orphans: 
2; text-align: left; text-indent: 0px; text-transform: none; white-space: 
normal; widows: 2; word-spacing: Opx; -webkit-text-size-adjust: auto; 
-webkit-text-stroke-width: Opx; background-color: rgb(255, 255, 255); 
display: inline !important; float: none; "> 中 国 最 大 的 旅游 行业 同业 交流 合作 
平台 ， 同 时 也 是 国内 首 个 实名 制 的 旅游 同行 交流 社区 。 旅 游 从 业 人 员 可 以 在 </span><span 
style="color: rgb(102，102，102) ; font-family: 宋体 ,arial; font-size: 
12px; font-style: normal; font-variant: normal; font-weight: normal; 
letter-spacing: normal; line-height: 24px; orphans: 2; text-align: left; 
text-indent: Opx; text-transform: none; white-space: normal; widows: 2; 
word-spacing: 0px; -webkit-text-size-adjust: auto; ~webkit-text-stroke— 
width: Opx; display: inline !important; float: none; background-color: 
rgb(255，255，255)">** 通 </span><span style="color: rgb(102, 102, 102); 
font-family: 宋体 ，arial; font-size: 12px; font-style: normal; font- 
variant: normal; font-weight: normal; letter-spacing: normal; line-height: 
24px; orphans: 2; text-align: left; text-indent: Opx; text-transform: 
none; white-space: normal; widows: 2; word-spacing: Opx; -webkit-text— 
size-adjust: auto -webkit-text-stroke-width: 0px; background-color: 
rgb(255, 255, 255); display: inline !important; float: none; "> 与 几 万 
同行 实时 交流 互动 ， 还 可 免费 获取 同行 报价 、 同 行 询 价 ， 是 旅游 从 业 人 员 拓 展 同行 业务 的 首选 
平台 ! </span></div> 

<div class="title"> 


"黑体 "> 合作 网 站 


<font face= 
</font> 
</div> 
<div class="content text"> 
<a href="http://www.123.com"><img src="images/ 合 作 网 站 .jpg" width= 
"106" height="34" alt="s" title="s" class="inspiration" /></a> 
<ahref="http://www.123.net"><img src="images/ 合 作 网 站 2.jpg"width= 


“31s 
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"100™" height="34" alt="s" title="s" class="inspiration" /></a> 

xahref="http://www.123.info"><img src="images/ 合 作 网 站 3.jpg" width= 
"103" height="34" alt="s" title="s" class="inspiration" /></a> 

</div> 
</div> 
<div id="page content right" style="width: 430px; height: 579px"> 
<div class="title"> 

&nbsp; <p><font face=" 黑 体 "> 三 亚 风景 </font></div> 

<div class="content text"> 

<span style="color: rgb(85, 85, 85); font-family: Simsun; font-size: 
14px; font-style: normal; font-variant: normal; font-weight: normal; 
letter-spacing: normal; line-height: 26px; orphans: 2; text-align: left; 
text-indent: Opx; text-transform: none; white-space: normal; widows: 2; 
word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke— 
width: 0px; background-color: rgb (255, 255, 255) display: inline !important; 
float: none; ">gnbsp;é&nbsp;&nbsp; 

</span><font size="2"> 

<span style="color: rgb(85, 85, 85); font-family: Simsun; font-style: 
normal; font-variant: normal; font-weight: normal; letter-spacing: normal; 
line-height: 26px; orphans: 2; text-align: left; text-indent: Opx; 
text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; 
—webkit-text-size-adjust: auto; -webkit-text-stroke-width: Opx; display: 
inline !important; float: none; background-color: rgb(255, 255, 255)"> 

三 亚 阳光 充足 ， 长 夏 无 冬 ， 素 有 天 然 大 温室 、 绿 色 聚 宝 盆 之 称 。 这 里 气候 温和 ， 属 典型 的 
热带 海洋 性 气候 , 全 年 平均 气温 25 .5 度 , 年 平均 海水 温度 25 .1 度 , 冬季 海水 最 低温 度 22 度 ， 
适宜 四 季 潜 水 和 开展 各 类 海上 运动 </span></font><span style="color: rgb(85, 85, 
85); font-family: Simsun; font-size: 14px; font-style: normal; 


font-variant: normal; font-weight: normal; letter-spacing: normal; 
line-height: 26px; orphans: 2; text-align: left; text-indent: Opx; 
text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; 
-webkit-text-size-ad]just: auto; —webkit-text-stroke-width: Opx; 
background-color: rgb(255, 255, 255); display: inline !important; float: 
none; ">。 </span></div> 

<div class="content text"> 

<a href="details.html"><img src="images/pic/ 亚 龙湾 .jpg" width="100" 
height="100" alt="pic" title="pic" class="gallery" /></a> 

<a href="details.html"><img src="images/pic/ 大 东海 .jpg" width="100" 
height="100" alt="pic" title="pic" class="gallery" /></a> 

xa href="details.html"><img src="images/pic/ 天 涯 海 角 .jpg" width= 
"100"” height="100" alt="pic" title="pic" class="gallery" /></a> 

<a href="details.html"><img src="images/pic/ 蜗 支 洲 岛 .jpg" width= 
"100" height="100" alt="pic" title="pic" class="gallery" /></a> 

<a href="details.html"><img src="images/pic/ 大 小 洞天 .jpg" width= 
"100™ height="100" alt="pic" title="pic" class="gallery" /></a> 
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</div> 

</div> 
</div> 
<div id="footer"> 
<div id="footer content"> 
<div id="copyrights" style="width:1014px; height:43px"> 
<p align="center"><font color="#FFFF00"><span style="font-size: 15pt"> 版 
权 所 有 2013 
</span></font> 
</div> 
</div> 
</div> 
</body> 
</html> 


运行 代码 后 效果 如 图 13-1 所 示 。 


让 页 分 关 下 们 个 工作 人 员 


TT 


图 13-1 网 站 首页 


2. 景点 信息 二 级 页 面 1 代码 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 网 站 实例 </title> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 
<div id="top menu"> 
<ul class="menu"> 
<li><a href="index.html" class="nav"> 主 页 </a></1i> 
<li><a href="#" class="nav"> 关 于 我 们 </a></1i> 


A 
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<li><a href="#" class="nav"> 工 作 人 员 </a></1i> 

<1i><a href="gallery.html"” class="nav"> 相 关 资 源 </a></1i> 
<li><a href="contact.html"” class="nav"> 联 系 我 们 </a></1i> 
</ul> 


</div> 


<div id="main content"> 


.214。 


<div id="top _ banner"> 
<a href="index.html"><img src="images/logo.png" width="130"” height= 
"130" alt="home" title="logo" border="0" class="1ogo"/></a> 
</div> 
<div id="page content left" style="width: 407px; height: 737px"> 
<div class="title"> 

gnbsp; <p><font face=" 黑 体 "> 天 涯 海 角 </font> 

</div> 

<div class="content text"> 

<img src="images/pic/ 天 涯 海 角 .jpg" width="365" height="190" alt="big" 
title="big" class="pic" /> 

</div> 

<div class="title"> 

<font face=" 黑 体 "> 天 涯 海 角 简 介 </font> 

</div> 

<div class="content text"> 

<p style="margin-top: Opx; margin-right: Opx; margin-bottom: Opx; 
margin-left: Opx; padding-top: 2px; padding-right: 0px padding-bottom: 
2px; padding-left: 0px; font-size: 14px; line-height: 26px; color: rgb (85, 
85, 85); font-family: Simsun; font-style: normal; font-variant: normal; 
font-weight: normal; letter-spacing: normal; orphans: 2; text-align: left; 
text-indent: Opx; text-transform: none white-space: normal; widows: 2; 
word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke- 
Width: Opx; background=-color: rgb(l255r 255, 255); > 

&nbsp; &nbsp; <font size="2"> 

天 涯 海 角 风景 区 ( 必 游 ) 出 三 亚 市 沿海 滨 西 行 26 公里 , 到 达 了 马 岭 山下 , 便 是 “天 涯 海 角 ” 
奇 景 。 游 客 至 此 ， 似 乎 到 了 天 地 之 尽头 。 

古 时 候 交 通 闭塞 ,“ 乌 飞 尚 需 半年 程 ”的 琼 岛 , 人 烟 稀少 , 荒芜 凄凉 , 是 封建 王朝 流放 &quot; 
道 臣 gsquot; 之 地 。 来 到 这 里 的 人 ， 来 去 无 路 ， 望 海 兴 叹 ， 故 谓 之 “和 天涯海角 ”。 宋 朝 名 臣 胡 欠 
哀叹 “区 区 万 里 天 涯 路 ， 野 草 若 烟 正 断 魂 ”。 唐 代 字 相 要 德 裕 用 “一 去 一 万 里 ， 千 之 千 不 还” 
的 诗句 倾吐 了 请 的 际遇 。 这 里 记载 着 历史 上 贬 官 逆 臣 的 悲剧 人 生 ， 经 历代 文人 墨客 的 题 咏 描 绘 ， 
成 为 我 国富 有 神奇 色彩 的 著名 游览 胜地 。 这 里 抱 水 蓝天 一 色 ， 烟波 浩 输 ， 帆 影 点 点 ， 椰 林 小 效 ， 
奇石 林立 ， 那 刻 有 : “天 涯 ”、“ 海 角 ”、“ 南 天 一 柱 ”、“ 海 南 南 天 ”等 巨石 梭 峙 海滨 ， 使 
整个 景区 如 诗 如 画 ， 美 有 胜 收 。“ 南 天 一 柱 ” 据 说 是 清 代 宣统 年 间 崖 州 知州 范 云梯 所 书 。“ 南 
天 一 柱 ” 来 历 还 有 传说 。 相 传 很 久 以 前 ， 陵 水 黎族 有 两 位 仙女 知道 后 偷偷 下 凡 ， 立 身 于 南海 中 ， 
为 当地 渔家 指 航 打 鱼 。 王 母 娘娘 恼怒 ， 派 雷公 电 母 抓 她 们 回去 二 人 不 表 ， 化 为 双 峰 石 ， 被 辟 为 
两 截 , 一 截 掉 在 黎 安 附近 的 海中 , 一 截 飞 到 天 涯 之 旁 , 成 为 今天 的 “南天 一 柱 ”。</font></div> 


</div> 
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<div id="page content right" style="width: 409px; height: 712px"> 


<div class="title"> 


黑体 "> 详细 介绍 </font></div> 


<div class="content text"> 


&nbsp; <p><font face= 


<b style="margin:0px; padding:0px; display: block; color: #FF7733; 
font-family: Simsun; font-size: 12px; font-style: normal; font-variant: 
normal; letter-spacing: normal; line-height: 26px; orphans: 2; text-align: 
left; text-indent: 0px; text-transform: none; white-space: normal; widows: 
2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text- 
stroke-width: Opx; background-color: rgb(255, 255, 255)"> 

门票 。 开放 时 间 </b> 

<span style="color: rgb(85, 85, 85); font-family: Simsun; font-size: 
12px; font-style: normal; font-variant: normal; font-weight: normal; 
letter-spacing: normal; line-height: 26px; orphans: 2; text-align: left; 
text-indent: Opx; text-transform: none; white-space: normal; widows: 2; 
word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke— 
width: 0px; background-color: rgb (255, 255, 255) display: inline !important; 
float: none; "> 具体 为 散 客 票 由 65 元 / 张 调整 为 100 元 / 张 〈 其 中 含 5 元 价格 调节 基金 ) ; 
团队 票 由 60 元 / 张 调整 为 95 元/ 张 (其 中 含 5 元 价格 调节 基金 ) ， 半 票 由 35 元 / 张 调整 为 50 
元 / 张 (其 中 含 5 元 价格 调节 基金 ) 。 其 中 ， 对 现役 军人 、 革 命 伤 残 军 人 、1.2 米 以 下 儿童 、 
70 周岁 以 上 的 老年 人 赁 有 效 证 件 实行 免票 ， 对 学 生 、 未 成 年 人 、60-70 周岁 老年 人 、 残 疾 人 凭 
有 效 征 件 实行 半价 优惠 ， 对 旅行 社团 队 购 票 实行 无 差别 团体 票 。07:30 一 18 :30</span><p> 

<b style="margin:0px; padding:0px; display: block; color: #FF7733; 


font-family: Simsun; font-size: 12px; font-style: normal; font-variant: 
normal; letter-spacing: normal; line-height: 26px; orphans: 2; text-align: 
left; text-indent: 0px; text-transform: none; white-space: normal; widows: 
2; word-spacing: Opx; -webkit-text-size-adjust: auto; -webkit-text-— 
stroke-width: Opx; background-color: rgb(255, 255, 255)"> 

交通 概况 </b> 

<span style="color: rgb(85, 85, 85); font-family: Simsun; font-size: 
12px; font-style: normal; font-variant: normal; font-weight: normal; 
letter-spacing: normal; line-height: 26px; orphans: 2; text-align: left; 
text-indent: Opx; text-transform: none white-space: normal; widows: 2; 
word-spacing: 0px; -webkit-text-size-adjust: auto; ~webkit-text-stroke— 
width: 0px; background-color: rgb (255, 255, 255); display: inline !important; 
float: none; "> 

1. 市 区 任何 一 地 点 乘 当地 2 路 、4 路 中 巴 车 至 终点 站 ， 再 转 乘 泰 和 旅游 专线 巴士 〈5 元 / 
人 ) gnbsp; gnbsp; gnbsp; 

2. 可 在 市 内 乘坐 “天 涯 ”“ 南 山 ”等 字样 的 中 巴 车 直达 (3-4 元 ) &nbsp; gnbsp; &nbsp; 
3. 由 市 区 乘 出 租车 (25-30 元 ) ; 包车 (150 元) 。 


</span></p> 


<p> 
<span style="color: #FF7733°"> 
<b style="display: block; font-family: Simsun; font-size: 12px7 


放风 区 二 
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font-style: normal; font-variant: normal; letter-spacing: normal; 
line-height: 26px; orphans: 2; text-align: left; text-indent: Opx; 
text-transform: none; white-space: normal; widows: 2; word-spacing: Opx; 
-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; margin: 
Opx; padding: Opx; background-color: rgb(255, 255, 255)"> 

提醒 </b></span><span style="color: rgb(85, 85, 85); font-family: 
Simsun; font-size: 12px; font-style: normal; font-variant: normal; 
font-weight: normal; letter-spacing: normal; line-height: 26px; orphans: 
2; text-align: left; text-indent: 0px; text-transform: none; white-space: 
normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; 
-webkit-text-stroke-width: 0px; display: inline !important; float: none; 
background-color: rgb(255，255，255) "> 老 版 人 民 币 2 元 的 背面 就 是 天 涯 海 角 的 风 
景 图 ， 面 对 实景 时 不 妨 仔细 比较 一 下 。</span></p> 

<P> 

<b style="margin:0px; padding:0px; display: block; color: #FF7733; 
font-family: Simsun; font-size: 12px; font-style: normal; font-variant: 


normal; letter-spacing: normal; line-height: 26px; orphans: 2; text-align: 


left; text-indent: 0px; text-transform: none; white-space: normal; widows: 


2; word-spacing: Opx; -webkit-text-size-adjust: auto; -webkit-text- 
stroke-width: Opx; background-color: rgb(255, 255, 255)"> 

最 佳 线路 </b> 

<span style="color: rgb(85, 85, 85); font-family: Simsun; font-size: 
12px; font-style: normal; font-variant: normal; font-weight: normal; 
letter-spacing: normal; line-height: 26px; orphans: 2; text-align: left; 
text-indent: Opx; text-transform: none; white-space: normal; widows: 2; 
word-spacing: 0px; -webkit-text-size-adjust: auto; ~webkit-text-stroke— 
width: Opx; display: inline !important; float: none; background-color: 
rgb(255，255，255) "> 进 大 门 直 走 到 海边 的 八角 广场 ， 沿 海边 向 右 走 到 电瓶 车 的 终点 站 下 
海滩 ， 沿 海滩 往 前 走 ， 就 是 “ 海 判 南天 ”、“ 南 天 一 柱 ”， 再 沿 沙滩 前 行 约 300 米 就 是 “天 涯 ”、 
“ 海 角 ” 石 。 返 回 时 可 走 “ 天 涯 路 ” 林 荫 小 道 </span><span style="color: rgb(85, 85， 
85); font-family: Simsun; font-size: 12px; font-style: normal; font- 
variant: normal; font-weight: normal; letter-spacing: normal; line-height 
26px; orphans: 2; text-align: left; text-indent: Opx; text-transform: 
none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text— 
size-adjust: auto -webkit-text-stroke-width: Opx; background-color: 
rgb(255, 255, 255); display: inline !important; float: none; ">。 
</span></p> 

<p> 

&nbsp; </p> 

<p> 

&nbsp;</p>&gnbsp; <p> 

&nbsp; </p> 

<p> 

&nbsp; </p></div> 


第 13 章 “<meta> 标 签 的 使 用 


</div> 

</div> 

<div id="footer"> 

<div id="footer content"> 

<div id="copyrights" style="width:1014px; height:43px"> 

<p align="center"><font color="#FFFF00"><span style="font-size: 15pt"> 版 
权 所 有 2013 

</span></font> 

</div> 

</div> 

</div> 

</body> 

</html> 


运行 代码 后 效果 如 图 13-2 所 示 。 
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图 13-2 二 级 页 面 1 


3. 景点 信息 二 级 页 面 2 代码 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 网 站 实例 </title> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 
<div id="top menu"> 
<ul class="menu"> 
<li><a href="index.html" class="nav"> 主 页 </a></1i> 
<1i><a href="#" class="nav"> 关 于 我 们 </a></1i> 
<1i><a href="#" class="nav"> 工 作 人 员 </a></1i> 


se 
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<1i><a href="gallery.html"” class="nav"> 相 关 资 源 </a></1i> 
<li><a href="contact.html" class="nav"> 联 系 我 们 </a></1i> 
</ul></div> 


<div id="main content"> 


I 沁 


<div id="top banner"> 
<a href="index.html"><img src="images/logo.png" width="130" height= 
"130" alt="home" title="logo" border="0" class="1ogo"/></a> 
</div> 
<div id="page content"> 
<div class="title"> 
<font face=" 黑 体 "> 景点 介绍 </font> 
</div> 
<div class="details" style="width: 633px; height: 106px"> 
<ul class="services"> 
<l1i></1i> 
<1i> 
<span style="color: rgb(0, 0, 0); font-family: monospace; 
font-style: normal; font-variant: normal; font-weight: normal; letter-— 
spacing: normal; line-height: normal; orphans: 2; text-align: -webkit- 
auto; text-indent: Opx; text-transform: none white-space: pre-wrap; 
widows: 2; word-spacing: Opx; -webkit-text-size-adjust: auto; -webkit— 
text-stroke-width: Opx; font-size: medium; display: inline !important; 
float: none; ">gnbsp;&nbsp; 
</span><font size="3"> 
<span style="color: rgb(0, 0, 0); font-family: monospace; 
font-style: normal; font-variant: normal; font-weight: normal; 
letter-spacing: normal; line-height: normal; orphans: 2; text-align: 
-webkit-auto text-indent: Opx; text-transform: none; white-space: 
pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; 
—webkit-text-stroke-width: 0px; display: inline !important; float: none"> 
蜗 支 洲 岛 世 界 色彩 斑 澜 ， 有 中 国保 护 最 完好 的 生态 珊瑚 礁 ; 


</span></font><span style="color: rgb(0, 0, 0); font-family: monospace; 


font-style: normal; font-variant: normal; font-weight: normal; letter- 
spacing: normal; line-height: normal; orphans: 2; text-align: ~webkit— 
auto; text-indent: Opx; text-transform: none; white-space: pre-wrap; 
widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-- 
text-stroke-width: Opx; font-size: 12pt; display: inline !important; 
float: none">2、 岛 上 有 潜水 、 半 潜 观 光 、 海 钓 、 滑 水 、 帆 船 、 帆 板 ， 摩 托 艇 、 香 获 船 、 独 
木舟 、 拖 搜 伞 、 蹦 跳 船 ， 沙 滩 摩 托 车 ， 水 上 降落 伞 、 沙 滩 排 球 ， 沙 滩 足 球 等 30 余 海上 和 沙滩 娱 
乐 项 目 ， 带 给 游客 原始 ， 静 诬 ， 浪 漫 和 动感 时 尚 的 休闲 体验 ，3、 情 侣 们 享受 二 人 世界 的 “小 天 
堂 ”; </span></1i> 
</ul> 
</div> 


<div class="title"> 
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<font face=" 黑 体 "> 景 点 照片 </font></div> 
<div class="content text"> 
<a href="details.html"><img src="images/pic/ 蝇 支 洲 岛 1.jpg" width= 
"100" height="100" alt="pic" title="pic" class="gallery" /></a> 
<a href="details.html"><img src="images/pic/ 蝇 支 洲 岛 2.jpg" width= 
"100™" height="100" alt="pic" title="pic" class="gallery" /></a> 
<a href="details.html"><img src="images/pic/ 蝇 支 洲 岛 3.jpg" width= 
"100" height="100" alt="pic" title="pic" class="gallery" /></a> 
<a href="details.html"><img src="images/pic/ 蝇 支 洲 岛 4.jpg" width= 
"100" height="100" alt="pic" title="pic" class="gallery" /></a> 
<a href="details.html"><img src="images/pic/ 蝇 支 洲 岛 5.jpg" width= 
"100" height="100" alt="pic" title="pic" class="gallery" /></a>gnbsp; 
&nbsp; gnbsp; gnbsp; &nbsp; gnbsp; 
</div> 
</div> 
</div> 
<div id="footer"> 


<div id="footer content"> 


<div id="copyrights" style="width:1014px; height:43px"> 

<p align="center"><font color="#FFFF00"><span style="font-size: 15pt"> 版 
权 所 有 2013 

</span></font> 

</div> 

</div> 

</div> 

</body> 

</html> 


运行 代码 后 效果 如 图 13-3 所 示 。 


图 133 二 级 页 面 2 


ds 
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4. 联系 我 们 页 面 代码 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 网 站 实例 </title> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 


<div id="top menu"> 


<ul class="menu"> 

<li><a href="index.html" class="nav"> 主 页 </a></1i> 
<li><a href="#"” class="nav"> 关 于 我 们 </a></1i> 

<li><a href="#"” class="nav"> 工 作 人 员 </a></1i> 

<li><a href="gallery.html"” class="nav"> 相 关 资 源 </a></1i> 
<1i><a href="contact.html" class="nav"> 联 系 我 们 </a></1i> 
</ul></div> 


<div id="main content"> 


“Ts 


<div id="top banner"> 

<a href="index.html"><img src="images/logo.png" width="130" height= 
"130" alt="home" title="logo" border="0" class="1ogo" /></a> 

</div> 

<div id="page content left"> 

A 


<div class 
<dt style=" 


margin-top: 20px; margin-right: 0px; margin-bottom: 10px; 
margin-left: 0px; padding-top: Opx; padding-right: 0px; padding-bottom: 
Opx; padding-left: Opx; font-weight: bold; color: rgb(51, 51, 51); 
font-family: tahoma, arial, 宋体 , sans-serif; font-size: 12px; font-style: 
normal; font-variant: normal; letter-spacing: normal; line-height: 22px; 
orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: 
none; white-space: normal; widows: 2; word-spacing: Opx; -webkit-text-— 
size-adjust: auto -webkit-text-stroke-width: 0px; background-color: 
ragb{255, 2557 255)? ”之 

用 户 反馈 </dt> 

<dd style="margin-top: Opx; margin-right: Opx; margin-bottom: Opx; 
margin-left: 0px; padding-top: Opx; padding-right: 0px; padding-bottom: 
Opx; padding-left: 0px; color: rgb(51, 51, 51); font-family: tahoma, arial, 
宋体 ，sans-serif; font-size: 12px; font-style: normal; font-variant: 
normal; font-weight: normal; letter-spacing: normal; line-height: 22px; 
orphans: 2; text-align: ~webkit-auto; text-indent: 0px; text-transform: 
none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text— 
size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: 
rgb(255, 255, 255); "> 

<p style="margin-top: Opx; margin-right: Opx; margin-bottom: Opx; 
margin-left: 0px padding-top: Opx; padding-right: 0px; padding-bottom: 
Opx; padding-left: Opx; "> 
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想 对 我 们 提出 功能 建议 ?<br> 
发 现 了 网 页 中 的 问题 想 告诉 我 们 ? <br> 
还 是 其 他 网 友 未 经 你 的 允许 擅自 上 传 了 你 的 图 片 或 文字 ? <br> 
请 通过 邮箱 : 1238123.com 把 你 想 说 的 一 切 告诉 我 们 吧 ! </dd> 
<dt style="margin-top: 20px; margin-right: 0px; margin-bottom: 10px; 
margin-left: Opx; padding-top: 0px; padding-right: Opx; padding-bottom: 
Opx; padding-left: Opx; font-weight: bold; color: rgb(51, 51, 51); 
font-family: tahoma, arial, 宋体 , sans-serif; font-size: 12px; font-style: 
normal; font-variant: normal; letter-spacing: normal; line-height: 22px; 
orphans: 2; text-align: -webkit-auto text-indent: Opx; text-transform: 
none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text— 
size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: 
rgb (255, 255, 255); "> 
商务 合作 </dt> 
<dd style="margin-top: Opx; margin-right: Opx; margin-bottom: Opx; 
margin-left: Opx; padding-top: Opx; padding-right: 0px; padding-bottom: 
0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: tahoma, arial, 
宋体 ，sans-serif; font-size: 12px; font-style: normal; font-variant: 
normal; font-weight: normal; letter-spacing: normal; line-height: 22px; 
orphans: 2; text-align: -webkit-auto text-indent: Opx; text-transform: 
none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text- 
size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: 
rgb(295r 2557 255)3 "> 
<p style="margin-top: Opx; margin-right: Opx; margin-bottom: Opx; 
margin-left: 0px; padding-top: Opx; padding-right: 0px; padding-bottom: 
Opx; padding-left: Opx; "> 
期 望 与 我 们 在 内 容 、 品 牌 或 是 其 他 层面 上 开展 合作 ? <br> 
无 论 你 是 旅游 局 、 商 家 还 是 机 构 ，<br> 
请 将 你 的 合作 设想 及 详细 联系 方式 发 送 至 邮箱 : 123@123.com <br> 
我 公司 以 开放 的 心 ， 与 你 一 起 ， 成 就 亿 万 旅行 者 的 每 一 次 旅行 ! </dd> 
<p><br /> 
</div> 
</div> 
<div id="page content right"> 
<div class="title"> 
gnbsp; <p><font face=" 黑 体 "> 联系 我 们 </font></div> 
<p><font face=" 宋 体 " color="#000000" style="font-size: 11pt">&nbsp; 
&nbsp; 
如 果 您 有 好 的 建议 请 联系 我 们 </font></p> 
<div id="login" style="width: 193px; height: 206px"> 
<font face=" 黑 体 "> 姓名 </font><label>:</label> 
<input type="text" name="user" class="input" /> 
<div class="clear"></div> 


<label><font face=" 黑 体 "> 电 话 </font>:</label> 


i 
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<input type="text" name="sdfg" class="input"/> 
<div class="clear"></div> 
<label><font face=" 黑 体 ">Email</font>:</label> 
<input type="text" name="payuity" class= 
"input"/>gnbsp; 
<div class="clear"></div> 
<font face=" 黑 体 "> 具体 信息 </font><label>:</label> 


"™ rows="" class= 


<textarea name="text" cols= 
"textarea"></textarea> 
<div class="clear"></div> 
<div style="padding-left:90px;"> 
<div class="right" style="width: 36px; height: 20px"> 


<p> 
<input type="submit" name="Submit" value=" 提 交 "></div> 
</div> 
</div> 
</div> 


</div> 

<div id="footer"> 

<div id="footer content"> 

<div id="copyrights" style="width:1014px; height:43px"> 

<p align="center"><font color="#FFFF00"><span style="font-size: 15pt"> 版 
权 所 有 2013 

</span></font> 

</div> 

</div> 

</div> 

</body> 

</html> 


运行 代码 后 效果 如 图 13-4 所 示 。 
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图 13-4 ”联系 我 们 页 面 


第 13 章 <meta> 标 签 的 使 用 
13.5 ”高 手 训 练 营 


1. “description” 属 性 是 什么 意思 ? 

2.， 如 何 设置 自动 刷新 页 面 ? 

3. 将 上 一 章 练习 制作 的 导航 页 面 加 入 <meta> 标 签 ， 并 设置 其 “keywords” 为 “导航 页 
面 ” 页 面 语言 和 页 面 之 间 转 换 的 效果 。 

4. 继续 向 导航 页 面 添加 <meta> 标 签 的 相关 属性 ， 并 设置 其 页 面 语言 和 页 面 之 间 转 换 


和 


第 14 章 ”使 用 CSS 格 式 化 网 页 


经 过 前 面 的 学 习 , 相信 用 户 已 经 领略 到 了 HTML 语言 的 魅力 , 但 同时 也 在 为 设计 页 面 

时 复杂 的 表格 嵌 套 、 制 作 体积 比较 大 的 图 像 以 获得 期 望 的 布局 而 烦恼 不 已 吧 。 让 我 们 一 起 

来 认识 一 下 CSS 样式 表 ， 学 习 用 它 对 布局 、 字 体 、 颜 色 、 背 景 和 其 他 图 文 效果 实现 更 加 精 

确 的 控制 ， 并 且 可 以 只 通过 修改 一 个 文件 就 改变 不 计 页 数 的 网 页 外 观 和 格式 ， 以 更 少 的 编 
码 、 更 少 的 页 数 和 更 快 的 下 载 速度 在 所 有 浏览 器 和 平台 之 间 保 持 较 高 兼容 性 。 


本 

O 将 样式 表 添 加 到 网 页 中 

D 使 用 样式 表格 式 化 文本 

D 使 用 样式 表 定 义 背 景 、 边 框 
D 使 用 样式 表 精 确定 位 元 素 
口 使 用 样式 表 个 性 化 网 页 


14.1 CSS 样式 表 的 基本 概念 


什么 是 样式 ? 样式 其 实 就 是 格式 ， 对 网 页 来 说 ， 如 文字 的 大 小 、 颜 色 及 图 片 位 置 等 ， 
都 是 网 页 显示 资料 的 样式 。CSS 是 Cascading Style Sheet( 层 装 样 式 表单 ) 的 简称 ， 通 常 又 
称 为 风格 样式 表 〈Style Sheet) ， 它 是 用 来 进行 网 页 风格 设计 的 。 由 于 允许 同时 控制 多 重 
页 面 的 样式 和 布局 ，CSS 可 以 称 得 上 Web 设计 领域 的 一 个 突破 。 作 为 网 站 开发 者 ， 能 够 
为 每 个 HTML 元素 定义 样式 , 并 将 之 应 用 于 希望 的 任意 多 的 页 面 中 。 如 需 进行 全 局 的 更 新 ， 
只 需 简 单 的 改变 样式 ， 网 站 中 的 所 有 元 素 均 会 自动 的 更 新 。 

CSS 的 优点 在 于 : 

(1) 以 前 所 未 有 的 功能 精确 控制 页 面 布局 。 

(2) 可 以 使 网 页 的 表现 非常 统一 ， 并 且 容 易 修 改 。 

(3) 可 以 支持 多 种 设备 ， 如 手机 、PDA、 打 印 机 、 电 视 机 及 游戏 机 等 。 

(4) 能 够 制作 体积 更 小 、 下 载 更 快 的 网 页 。 


四 样式 表 的 作用 和 Word 中 的 样式 类 似 ， 通 过 修改 样式 ， 就 能 批量 更 改 所 有 应 用 该 
样式 的 内 容 格式 。 
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14.1.1 CSS 规则 定义 


每 条 规则 有 两 个 部 分 : 选择 符 和 声明 。 每 条 声明 实际 上 是 属性 和 值 的 组 合 。 每 个 样式 
表 就 是 由 一 系列 规则 组 成 的 , 但 规则 并 不 总 是 出 现在 样式 表 里 。 最 基本 的 规则 其 语法 如 下 : 


p {text-align:center;} 


其 中 ， 规 则 的 左边 “p” 就 是 选择 符 。 所 谓 选择 符 就 是 规则 中 用 于 选择 文档 中 要 应 用 
样式 的 那些 元 素 。 规 则 的 右面 text-align:center:; 部 分 是 声明 。 它 是 由 CSS 属性 “text-align” 
及 其 值 “center” 组 成 的 。 声 明 的 格式 是 固定 的 ， 某 个 属性 后 跟 冒 号 ， 然 后 是 其 取 值 。 

有 时 , 用 户 或 许 需要 让 同一 条 规则 应 用 于 多 个 元 素 ,也 就 是 多 个 选择 符 。 其 语法 如 下 : 


p,h2{text-align:center;} 

通过 将 多 个 元 素 同时 放 在 规则 的 左边 并 且 用 逗号 分 隔 它们 ， 右 边 为 规则 定义 的 样式 ， 
规则 将 被 同时 应 用 于 两 个 选择 符 。 逗 号 告诉 浏览 器 在 这 一 条 规则 中 包含 两 个 不 同 的 选择 符 。 
14.1.2 样式 类 

除 基本 的 文档 元 素 外 ， 还 有 两 个 其 他 的 选择 符 : 类 〈class) 选择 符 和 ID 选择 符 ， 它 
们 允许 以 独立 于 文档 元 素 的 方式 来 分 配 样式 规则 的 应 用 ， 这 些 选择 符 既 可 以 独立 运用 ， 也 
可 以 和 元 素 选择 符合 用 。 


1， 类 选择 符 


使 用 类 选择 符 之 前 要 对 实际 文档 作 标记 ， 这 样 才能 使 这 个 选择 符 发 挥 作 用 。 为 了 将 类 
选择 符 的 样式 关联 到 一 个 元 素 ， 那 个 元 素 必须 要 设置 合适 的 类 属性 。 其 语法 如 下 : 


.name{text-align:center;} 


类 选择 符 通 过 直接 引用 元 素 中 类 属性 的 值 而 产生 效果 。 在 这 个 引用 前 面 总 是 一 个 句点 
(.) ， 用 它 来 标识 一 个 类 选择 符 。 这 个 句点 帮助 类 选择 符 与 其 他 元 素 相 分 离 。 在 文档 后 面 
的 部 分 通过 包含 与 样式 相关 的 “class” 属 性 ， 且 将 其 中 一 个 预定 义 的 样式 指定 为 “name” 
值 ， 就 可 以 明确 地 选择 要 对 该 标签 的 特定 情况 应 用 何 种 样式 。 其 语法 如 下 : 


<p class=name> 


2. ID 选择 符 
ID 选择 符 类 似 于 类 选择 符 ， 但 前 面 用 “#” 而 不 是 “.”。 其 语法 如 下 : 


i 


HTMI/CSS 网 页 设计 与 开发 一 站 式 学 习 一 一 难点 /案例 /练习 


#id{text-align:center;} 

ID 选择 符 指 的 是 人 D 属性 中 的 值 ， 而 不 是 引用 class 属 性 的 值 。 其 语法 如 下 : 

<p id=id> 

类 和 了 的 不 同 点 在 于 ， 类 可 以 分 配给 HTML 文档 任何 数量 的 元 素 ，ID 却 只 能 在 某 个 
HTMI 文 档 中 使 用 一 次 。D 对 给 定 元 素 应 用 何 种 样式 比 类 具有 更 高 的 优先 权 。 

3. 伪 类 

伪 类 允许 将 样式 应 用 于 文档 中 不 存在 的 结构 上 ， 换 句 话 说 ， 可 以 不 依赖 于 文档 结构 ， 
而 且 在 不 能 简单 地 通过 研究 文档 的 标签 来 推断 的 情况 下 ， 将 样式 应 用 于 文档 的 某 个 部 分 。 
伪 类 以 一 个 冒号 开始 ， 其 语法 如 下 : 

a:hover{text-decoration:underline;} 

比较 常用 的 伪 类 包括 “:link”、“:hover”、“:visited”、“:active”， 这 几 个 伪 类 经 

常用 于 链接 <a> 标 签 上 ，“a:link” 设 定 正常 状态 下 链接 文字 的 样式 。“a:active” 设 定 鼠 标 
单 击 时 链接 的 外 观 。“a:visited” 设 定 访问 过 的 链接 外 观 。“a:hover” 设 定 鼠 标 放 置 在 链接 
文字 之 上 时 文字 的 外 观 。 


14.2 样式 表 的 类 型 


1. 外 部 样式 表 
其 语法 如 下 : 
<link rel="stylesheet" href=" 样 式 表 地 址 " type="text/css"/> 


2. 导入 样式 表 


可 以 使 用 CSS 的 @import 声明 将 一 个 外 部 样式 表 文 件 输入 到 另外 一 个 CSS 文件 中 ,被 
输入 的 CSS 文件 中 的 样式 规则 定义 语句 就 成 为 了 输入 到 的 CSS 文件 的 一 部 分 ， 也 可 以 使 
用 @import 声明 将 一 个 CSS 文件 输入 到 网 页 文件 的 <style></style> 标 签 对 中 , 被 输入 的 CSS 
文件 中 的 样式 规则 定义 语句 就 成 了 <style></style> 标 签 对 中 的 语句 。 其 语法 如 下 : 

<style type="text/css"> 


Qimport url (http://../im.css) 
</style> 
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3. 内 联 样式 表 

直接 在 HTML 标签 内 ,插入 “sytle” 属 性 ， 再 定义 要 显示 的 样式 ， 这 是 最 简单 的 样式 
定义 方法 。 不 过 ， 利 用 这 种 方法 定义 样式 时 ， 效 果 只 可 以 控制 该 标签 ， 其 语法 如 下 : 

< 标签 名 称 style=" 样 式 属性 :属性 值 ;样式 属性 :属性 值 "> 

如 : 


<body style="color:#FF0000;font-family:’ 宋体 " ;cursor:url (mouse.ani);"> 
// 定 义 了 页 面 中 文本 的 颜色 、 字 体 ， 以 及 页 面 的 鼠标 指针 


4， 铸 入 样式 表 


嵌入 样式 表 是 把 样式 表 放 到 页 面 的 <head> 区 里 ， 这 些 定义 的 样式 就 应 用 到 页 面 中 了 ， 
仅 对 该 页 面 有 效 ， 样 式 表 是 用 <style> 标 签 插入 的 。 其 语法 如 下 : 


<head> 


<style type="text/css"> 

-3 

hr {color: sienna} 

p {margin-left: 20px} 

body {background-image: url("images/back.gif")} 
= 

</style> 


</head> 

“type” 属 性 是 指定 “style” 元 素 以 CSS 的 语法 定义 。 有 些 低 版 本 的 浏览 器 不 能 识别 
<style> 标 签 ， 这 意味 着 低 版 本 的 浏览 器 会 忽略 <style> 标 签 里 的 内 容 ， 并 把 <style> 标 签 里 的 
内 容 以 文本 直接 显示 到 页 面 上 。 为 了 避免 这 样 的 情况 发 生 ， 用 加 HTML Es 
释 --> 隐 藏 内 容 而 不 让 它 显示 。CSS 样式 表 中 的 注释 语句 以 “” 开 头 ， 以 “” 结 尾 ， 其 语法 
如 下 : 


/* 注 释 的 内 容 */ 


14.3 样式 表 的 设置 方法 


在 文档 中 调用 CSS 样式 表 的 方法 非常 灵活 , 可 根据 用 途 的 不 同 使 上 述 四 种 类 型 包含 到 


.227。 
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文档 中 。 
14.3.1 链 入 外 部 样式 表 


外 部 样式 表 是 将 CSS 包含 到 Web 文档 中 的 首选 方法 。 外 部 样式 表 可 以 被 存放 在 用 户 
浏览 器 的 缓存 中 ， 确 保 了 文档 的 快速 加 载 ， 同 时 也 大 大 节约 了 带宽 。 其 语法 为 : 


<link rel="stylesheet"”href=" 样 式 表 地 址 ”type="text/css"/> 


以 下 是 用 链接 CSS 文档 所 需 的 属性 。 
(1) rel: 是 relationship 的 英文 缩写 , 定义 外 部 文档 和 调用 文档 之 间 的 关系 ,StyleSheet 
的 意思 就 是 样式 调用 。 
(2) href: 和 超 链 接 <a> 标 签 中 一 样 ， 也 代表 超 链 接 引 用 。 接 受 CSS 文档 的 绝对 或 相 
对 路 径 。 
(3) type: 指 的 是 外 部 文件 的 MIME 类 型 。type="textcss" 说 明 这 段 标签 内 包含 的 内 容 
是 CSS 或 text， 如 果 某 种 浏览 器 不 能 识别 CSS， 会 将 代码 认为 text， 从 而 不 显示 也 不 报错 。 
实例 14-1: 根据 以 下 步骤 ， 链接 一 个 外 部 样式 表 。 
(1) 新 建 HTML 文档 ， 输 入 以 下 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html] xmlns="http://www.w3.o0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 链 接 一 个 外 部 样式 表 </title> 

<link href="example 14-1.css" rel="stylesheet" type="text/css" /> 

</head> 

<body> 

<h1> 链 接 外 部 样式 表 </h1> 

<h2> 打 开 Dreamweaver</h2> 

<h3> 右 键 -CSS 样式 -附加 样式 表 </h3> 

<h4>example 14-1.css</h4> 

<h5> 输 入 </h5> 

</body> 

</html> 


(2) 保存 为 example_14-1.html。 
(3) 新 建 CSS， 输 入 以 下 代码 : 
h1,h2,h3,h4,h5{ 
font-family:Verdana, Geneva, sans-serif; 


color:#600; 
border-bottom:1px dashed #F90; 
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(4) 将 CSS 存 为 example_14-1.css， 和 example_14-1.html 放 在 同一 文件 夹 中 。 


(5) 运行 代 


码 后 效果 如 图 14-1 所 示 。 
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example_14-1.css 
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图 14-1 链接 一 个 外 部 样式 表 


14.3.2 ”导入 外 部 样式 表 
导入 外 部 样式 表 需 要 使 用 @import 规则 ， 其 语法 如 下 : 


<style type="text/css"> 


@import url(" http://www.w3.org/styles.css") 


</style> 


直接 在 @import 后 直接 加 上 ur () ， 其 中 可 以 使 用 绝对 和 相对 路 径 。 
如 果 使 用 绝对 路 径 可 以 安全 地 丢弃 wl () 符号 ， 因 此 ， 下 面 的 示例 和 上 一 个 示例 有 相 


同 的 效果 : 


<style type="text/css"> 


Qimport " http://www.w3.org/styles.css" 


</style> 


14.3.3 ”内 联 样式 表 


内 嵌 样 式 表 使 用 <style></style> 标 签 将 内 堪 样 式 表 直 接 包 含 在 文档 中 。 如 果 要 向 不 支持 
样式 表 的 浏览 器 隐藏 样式 表 规则 , 可 以 使 用 HTML 的 注释 标签 。<style> 标 签 是 严格 形式 的 


XHTML 标签 ， 


<head> 


因此 ，<style> 标 签 需要 一 个 “type” 属 性 ， 其 语法 如 下 : 


<title>CSS word</title> 

<style type="text/css">/*CSS 样式 定义 开始 */ 

<!-- div {width:200; filter blur(add=true,direction=135, strengh=20); } /* 
定义 DIV 范围 内 的 样式 ， 包 括 宽度 (width) 、 模 糊 滤 镜 属性 (blur) */--> 

</style>/* 样 式 定义 结束 */ 


</head> 


有 时 为 了 在 文档 中 的 某 一 个 元 素 上 面 应 用 一 条 规则 ， 使 用 外 部 或 内 嵌 样 式 表 的 意义 就 


不 大 了 ， 这 时 就 可 以 使 用 “style” 属 性 。 
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实例 14-2: 使 用 内 联 样式 表 建 立 下 面 的 网 页 ， 比 较 使 用 与 不 使 用 样 表 有 何不 同 之 处 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.o0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

<title> 使 用 内 联 样式 </title> 

</head> 

<body> 

<p style="font-family: Verdana, Geneva, sans-serif; border: 1px dotted #F60; 
height: 30px; ”width: 400px; "> 使 用 内 联 样式 </p> 

<p> 不 使 用 内 联 样式 </p> 

</body> 

</html> 


运行 代码 后 效果 如 图 14-2 所 示 。 同 样 是 <p> 标 签 ， 上 方 使 用 了 内 联 样式 ， 四 周 有 1 个 
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图 14-2 使 用 内 联 样式 表 


14.4 字体 属性 一 一 font 


文本 是 网 页 中 不 可 缺少 的 信息 载体 ， 文 本 的 样式 设计 属性 如 表 14-1 所 示 : 


表 14-1 文本 样式 属性 


属 性 描述 
font 简写 属性 。 作 用 是 把 所 有 针对 字体 的 属性 设置 在 一 个 声明 中 
font-family 设置 字体 系列 
font-size 设置 字体 的 尺寸 
font-size-adjust 当 首 选 字 体 不 可 用 时 ， 对 替换 字体 进行 智能 缩放 (CSS2.1 已 删除 该 属性 。) 
font-stretch 对 字体 进行 水 平 拉 伸 (CSS2.1 已 删除 该 属性 。) 
font-style 设置 字体 风格 
font-variant 以 小 型 大 写字 体 或 者 正常 字体 显示 文本 
font-weight 设置 字体 的 粗细 
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14.4.1 ”设置 字体 一 font-family 
“font-family” 属 性 用 来 指定 字体 该 属性 允许 的 取 值 为 <fmily-name>|<generic-family>。 
其 语法 为 : 
<p style="font-family: Georgia">Georgia</p> 


如 果 用 户 没 有 安装 Georgia 字体 ,就 只 能 使 用 用 户 的 默认 字体 来 显示 元 素 ， 可 以 通过 
结合 特定 字体 名 和 通用 字体 系列 来 解决 这 个 问题 : 


<pstyle="font-family: Georgia, 'Times NewRoman', Times, serif;">Georgia</p> 


因此 ， 建 议 在 所 有 “font-family” 规 则 中 都 提供 一 个 通用 字体 系列 ， 这 样 就 提供 了 一 
条 后 路 ， 在 用 户 代理 无 法 提供 与 规则 匹配 的 特定 字体 时 ， 就 可 以 选择 一 个 候选 字体 。 如 果 
对 字体 非常 熟悉 ， 也 可 以 为 给 定 的 元 素 指 定 一 系列 类 似 的 字体 。 要 做 到 这 一 点 ， 需 要 把 这 
些 字体 按照 优先 顺序 排列 ， 然 后 用 逗号 进行 连接 : 


P {font-family: Times, TimesNR，'New Century Schoolbook', Georgia, 'NewYork', serif;} 


如 图 14-3 所 示 ，Dreamweaver 中 列 出 了 系列 字体 列表 ,用户 也 可 以 通过 选择 最 后 一 行 
来 编辑 想 要 的 字体 列表 。 
body 的 CSS 规则 定义 I 


分 类 类 型 


Font-fenily 四) 
Pont-size (S): Dr 
Cour 
四 Pont-style 0): Wd. 
EE wieht 


L CE EGG CE 
图 14-3 系列 字体 列表 


14.4.2 ”字体 大 小 属性 一 一 font-size 
“font-size” 属 性 用 来 控制 字体 的 大 小 , 值 可 以 是 绝对 或 相对 值 。 取 值 为 <absolute-size> 


| <relative-size> | <length> | <percentage> | inherit。 
(1)》<absolute-size>: 绝对 字体 尺寸 ， 不 允许 用 户 在 所 有 浏览 器 中 改变 文本 大 小 ， 在 
确定 了 输出 的 物理 尺寸 时 很 有 用 。 
取 值 为 xx-small | x-small | small | medium | large | x-large | xx-large。 


we 
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其 中 ，xx-small: 最 小 ，x-small: 较 小 ，small: 小 ，medium: 正 常 〈 默 认 值 ) ， 根 据 字体 进 
行 调整 。large: 大 ，x-large: 较 大 ，xx-large: 最 大 

(2) <relative-size> 相 对 字体 尺寸 (相对 与 其 父 容器 的 字体 尺寸 ) 。 

取 值 为 larger | smaller。 

larger: 相 对 于 父 容器 中 字体 尺寸 进行 相对 增 大 ， 使 用 成 比例 的 em 作为 单位 ，smaller: 
相对 于 父 容器 中 字体 尺寸 进行 相对 减 小 ， 使 用 成 比例 的 em 作为 单位 。 

(3) <length>: CSS 长 度 表示 法 ， 五 种 类 型 的 绝对 单位 如 下 ， 分 别 包括 英寸 (缩写 为 
in) 、 厘 米 (cm) 、 毫 米 (mm) 、 磅 (pt，1 英寸 的 1/72) 和 picas (pc，12 磅 ) 。 

(4) <percentage>: CSS 百分比 表示 法 〈 相 对 与 其 父 容器 的 字体 尺寸 ) 。 

(5) inherit: 继承 。 


通过 像素 设置 文本 大 小 ， 也 是 一 种 绝对 值 式 的 文本 设置 方式 ， 语 法 如 下 所 示 ， 可 以 对 
文本 大 小 进行 完全 控制 ; 


hl {font-size:60px;} 
h2 {font-size:40px;} 
p {font-size:14px;} 


如 图 14-4 所 示 ， 如 果 在 样式 表 中 设置 了 文本 大 小 ,再 更 改 浏览 器 字体 ,字体 大 小 不 会 
| @ Sen- Windows Intemet 
文件 上。 六 旨 ) 收 芒 实 (A】 工具。 帮助 (H) | 
IG® 区 a » 四 加 网 | search Resuks 山芋 
[ee 司 spe (YcultQ 


转 到 (G) 


停止 (P) Esc 

局 新 (R) F5 

9 ， 

文字 大 小 00 » 最 大 (G) 
编码 (D) » 较 大 (D 
by » © FM 
光标 浏览 (B) PF7 较 小 S) 
源 立 件 (中 

安全 报告 (S) 

国际 网 站 地 址 (1D) 

网 页 隐私 第 路 (V)- 

Ed) Fl 


图 14-4 更 改 浏览 器 字体 大 小 


当然 ， 如 果 想 要 避免 在 正 浏览 器 中 无 法 调整 文本 的 问题 ， 也 可 以 使 用 em 单位 代替 
pixels。 

“lem” 等 于 当前 的 字体 尺寸 。 如 果 一 个 元 素 的 “font-size” 为 16 像素 ， 那 么 对 于 该 
元 素 ，“1em” 就 等 于 16 像素 。 在 设置 字体 大 小 时 ，em 的 值 会 相对 于 父 元 素 的 字体 大 小 
改变 。 
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hl {font-size:3.75em;} /* 60px/16=3.75em */ 

h2 {font-size:2.5em;} /* 40px/16=2.5em */ 

p {font-size:0.875em;} /* 14px/16=0.875em */ 

可 以 使 用 下 面 这 个 公式 将 像素 转换 为 em: pixels/16=em，16 等 于 父 元 素 的 默认 字 
体 大 小 ， 假 设 父 元 素 的 font-size 为 20px， 那 么 公式 需 改 为 pixels/20=em。 


在 上 面 的 例子 中 , 以 em 为 单位 的 文本 大 小 与 前 一 个 例子 中 以 像素 计 的 文本 是 相同 的 。 
不 过 ， 如 果 使 用 em 单位 ， 则 可 以 在 所 有 浏览 器 中 调整 文本 大 小 。 


14.4.3” 粗 体 一 一 font-weight 


“font-weight” 属 性 提供 了 指定 字体 粗细 的 功能 ， 取 值 为 normal | bold | bolder | lighter | 
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit， 初 始 值 : normal。 

(1) normal: 正常 ， 等 同 于 400。 

(2) bold: 粗 体 ， 等 同 于 700。 

(3) bolder: 更 粗 。 

(4) lighter: 更 细 。 

(5) 100 |200 |300 | 400 | 500 | 600 | 700 | 800 |900: 字体 粗细 的 绝对 值 。 

(6) inherit 继承 。 

尽管 所 有 这 些 值 对 “font-weight” 来 说 都 是 可 用 的 ， 但 在 实际 的 Web 设计 中 ， 一 种 字 

体 要 么 是 粗 体 ， 要 么 不 是 。 也 就 是 说 ， 上 述 值 中 只 有 normal 和 bold 有 用 。 ee 

为 粗 体 ， 也 能 使 粗 体 文本 恢复 正常 ， 如 下 面 程序 所 示 ，<h4> 元 素 默 认为 粗 体 ， 置 后 ， 
粗 体 被 移 除 ，<p> 元 素 默认 为 非 粗 体 ， 经 设置 后 变 为 粗 体 。 


h4{font-weight:normal;} 
p{font-weight:bold;} 


14.4.4 ”和 斜体 一 一 font-style 


“font-style” 属 性 用 来 在 一 种 特定 字体 提供 的 不 同样 式 之 间 切 换 。 这 里 的 样式 是 斜体 
或 倾斜 ， 是 字体 本 身 的 一 部 分 ， 可 能 的 取 值 为 normal | italic | oblique | inherit。 

对 大 多 数字 体 来 说 倾斜 和 斜体 是 一 样 的 ， 如 果 一 种 字体 没有 倾斜 样式 ， 浏 览 器 会 自动 
选择 斜体 样式 ， 反 之 亦 然 。 

实例 14-3: 利用 样式 表 同 时 在 一 个 网 页 中 使 用 “font-style” 的 不 同 值 表示 文字 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.o0rg/TR/xhtmll1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


Di 
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<title> 和 斜体 或 倾斜 </title> 

<style type="text/CSS"> 

p#normal 

{font-style:normal;} 

p#italic 

{font-style:italic;} 

p#oblique 

{font-style:oblique;} 

</style> 

</head> 

<body> 

<p id="normal"> 这 是 正常 -normal</p> 

<p id="italic"> 这 是 斜体 -This font is italic</p> 
<p id="oblique"> 这 是 倾斜 -This font is oblique</p> 
</body> 

</html> 


运行 代码 后 效果 如 图 14-5 所 示 。 


ET EEC 
IGe | 站 baaaodat 重要 二 ,而 ss: 教 付 WEFVexample 14-2hml | 他 |[X][ 户 s 
言 必 本 夫 | 本 条 H 本 全 从 -~ 园 - 瑟 唤 -3mp- 


这 是 正常 -aommal 
才 大 评估 This font is italic 


过 霸 策 鲜 This font is obligue 


图 14-5 和 斜体 与 倾斜 对 比 


14.4.5 ”其 他 属性 


“font-variant” 定 义 小 型 的 大 写字 母 字 体 , 应 用 于 英文 字母 , 取 值 为 normal | small-caps 
| inherit， 初 始 值 为 normal。 
font-variant:small-caps; 声 明 会 使 字母 以 大 写字 母 的 形式 出 现 ， 但 尺寸 上 比 正常 的 大 写 
字母 要 小 一 些 ， 下 面 实例 中 显示 了 与 另 一 种 方式 text-transform:uppercase; 的 不 同 之 处 。 
实例 14-4: 利用 样式 表 比 较 “font-variant:small-caps” 与 “text-transform:uppercase” 之 
间 的 不 同 之 处 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.o0rg/TR/xhtmll1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.o0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>font-variant</title> 
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<style type="text/CSS"> 


SU== 
body { 
font-size:30px; 
text-align: center; 
}; 


p#uppercase { 
text-transform: uppercase; 
color: #C60; 
} 
p#small-caps { 
font-variant: small-caps; 
color: #F00; 
} 
ES 
</style> 
</head> 
<body> 
<p>font-variant</p> 
<p id="small-caps">small-caps</p> 
<p id="small-caps">Small-Caps</p> 
<p id="uppercase">uppercase small-caps</p> 
</body> 
</html> 


文件 (。 六 得 E)。 豆 看 M)。 收 语 闪 (A) 工具 禾 二 1H) 
OO a ve garmine -| 分 |X]| 亡 Be 
| 训 Wi 入 fortvariant 丛 " 国 - 呈 且 -mm Rs IROY 和 ” 


font-variant 


SMALL-CAPS 
SMALL-CAPS 


UPPERCASE SMALL-CAPS 


如 图 14-6 所 示 ， 应 用 font-variant:small-caps; 声 明 时 ， 大 写字 母 保 持 了 原 有 的 书写 大 小 
和 尺寸 ， 但 所 有 的 小 写字 母 显 示 为 大 写字 母 的 同时 ， 尺 寸 比 标签 文档 中 真正 的 大 写字 母 要 


小 一 些 。 
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除了 上 面 介绍 的 属性 之 外 , CSS 也 允许 利用 “font ”属性 来 定义 字体 , 取 值 为 font-style| 


font-variant | font-weight | font-size |line-height | font-family。 


P 
font :italic small-caps bold 22px/1.2em Arial; 
了 


上 述 实例 定义 段落 的 字体 为 斜体 〈font-style 属性 ) ， 小 型 的 大 写字 母 〈font-variant 属 
性 ) ， 粗 体 (font-weight 属性 ) ，22px 字体 大 小 〈font-size 属性 ) ，1.2 倍 (字体 〉 的 行 高 
(line-height 属性 ) ，Arial 字体 (font-family 属性 ) 。 


实例 14-5: 试 着 使 用 “font” 属 性 简单 定义 字体 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll1/DTD/xhtmll-transitional .dtd"> 
<html] xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style title="text/CSS"> 

了 

{ 

width: 700px; 

text-indent: 2em; 

} 

p#dingyi 

{ 

font:italic small-caps bold 22px/1.2em Arial; 

| 


</style> 

<title> 文 字 简 单 定义 </title> 

</head> 

<body> 

<p> 以 下 段落 的 字体 为 斜体 (font-style 属性 ) ， 小 型 的 大 写字 母 (font-variant 属性 ) ， 粗 
体 (font-weight 属性 ) ，12px 字体 大 小 (font-size 属性 ) ，1.2 倍 (字体 ) 的 行 高 
(line-height 属性 ) ，Arial 字体 (font-family 属性 ) </p> 

<p idq="dingyi"> 本 段落 的 字体 为 斜体 (font-style 属性 )， 小 型 的 大 写字 母 (font-variant 
属性 ) ， 粗 体 (font-weight 属性 ) ，12px 字体 大 小 (font-size 属性 ) ，1.2 倍 (字体 ) 
的 行 高 (line-height 属性 ) ，Arial 字体 (font-family 属性 ) </p> 

</body> 

</html> 
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运行 代码 后 效果 如 图 14-7 所 示 。 两 段 <p> 标 签 中 内 容 基 本 相同 ， 但 由 于 样式 表 的 使 用 
不 同 ， 结 果 完 全 不 一 样 。 


EC 


Ov a erarinstao peshopesiiN mT evom ~ [5 [x ||P scorch fsts Em 
席 ks 二 | 靖 文字 简单 定义 


以 下 段落 的 字体 为 斜体 (font-style 属 性 ) ， 小 型 的 大 写字 母 (fontvariant 苦 性 ) ， 粗 体 (fort- 
weight 属 性 ) ，12px 宇 体 大 小 〈font sze 属 性 ) ，12 兴 (字体 ) 的 行 高 (line-heigh 属 性 ) ，Aria 宇 体 
(feat family 属 性 ) 


共度 洒 府 字 从 为 舍 秩 (FONT-STYLE 悄 桥 ) ， 小 型 内 大 写字 好 
(FONT-VARIANT 属 徐 》， 诅 丁 (FONT-WEIGHT 属 挫 》，12PX 人 字 凶 太 小 
(FONT-SIZE 属 雁 》，1.2 供 ( 字 李 》 扒 条 谋 (LINE-HEIGHT 属 内 )， 

ARIAL 郑 八 (FONT-FAMLY 必 友 ) 


图 14-7 文字 的 简单 定义 


14.5 文本 属性 一 一 text 


文本 的 显示 格式 与 式样 对 于 网 页 设计 师 来 说 是 一 个 重要 问题 ， 通 过 文本 属性 ， 用 户 可 
以 改变 文本 的 颜色 、 字 符 间 距 、 对 齐 文本 、 装 饰 文本 、 对 文本 进行 缩 进 ， 等 等 。 


14.5.1 ”对 齐 方式 一 一 text-align 


“text-align” 是 一 个 基本 的 属性 ， 它 会 影响 一 个 元 素 中 的 文本 行 之 间 的 对 齐 方式 。 具 
体 的 取 值 如 14-2 所 示 。 


表 14-2 text-align 的 属性 


属 性 效果 
left 把 文本 排列 到 左边 
right 把 文本 排列 到 右边 
center 把 文本 排列 到 中 间 
justi 实现 两 端 对 齐 文本 效果 
inherit 规定 应 该 从 父 元 素 继承 text-align 属性 的 值 


“text-align” 的 取 值 很 简单 直观 ， 需 要 注意 的 是 “text-align:center” 与 “CENTER” 元 
素 的 作用 大 不 相同 。“CENTER” 不 仅 影 响 文 本 ， 还 会 把 整个 元 素 居中 ; 而 “text-align” 
不 会 控制 元 素 的 对 齐 ， 只 影响 内 部 内 容 ， 元 素 本 身 不 会 从 一 端 移 到 男 一 端 ， 只 是 其 中 的 文 
本 受 影 响 。 

这 里 重点 介绍 “justify”， 在 两 端 对 齐 文本 中 ， 文 本 行 的 左右 两 端 都 放 在 父 元 素 的 内 
边界 上 。 然 后 ， 调 整 单词 和 字母 间 的 间隔 ， 使 各 行 的 长 度 恰好 相等 。 用 户 也 许 已 经 注意 到 
了 ， 两 端 对 齐 文本 在 打印 领域 很 常见 ， 不 过 在 CSS 中 ， 还 需要 多 做 些 考虑 。 

要 由 用 户 代 理 《〈 而 不 是 CSS) 来 确定 两 端 对 齐 文本 如 何 拉 伸 ， 以 填 满 父 元 素 左右 边界 
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之 间 的 空间 。 例 如 ， 有 些 浏览 器 可 能 只 在 单词 之 间 增 加 额外 的 空间 ， 而 另外 一 些 浏览 器 可 
能 会 平均 分 布 字母 间 的 额外 空间 。 
实例 14-6: 使 用 “text-align” 属 性 实现 文本 两 端 对 齐 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0rg/TR/xhtml1l/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.o0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 文 本 对 齐 text-align: </title> 
<style type="text/CSS"> 
div{ 
width: 600px; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 18px; 
background-color: #09F; 
Color: #FFF; 
} 
.talign 
{ 
margin-left: 40px; 
margin-right: 80px; 
letter-spacing: lpx; 
word-spacing: 2px; 
line-height: 1.7em; 
text-indent: 40px; 
text-align: justify; 
) 
</style> 
</head> 


<body> 

<div><p class="talign">A light drizzle was falling as my sister Jill and 
I ran out of the Methodist Church, eager to get home and play with the 
presents that Santa had left for us and our baby sister, Sharon. Across 
the street fromthe church was a Pan American gas station where the Greyhound 
bus stopped. </p> 

<p class="talign">It was closed for Christmas, but I noticeda family standing 
outside the locked door, huddled under the narrow overhang in an attempt 
to keep dry. I wondered briefly why they were there but then forgot about 
them as I raced to keep up with Jill.</p></div> 

</body> 

</html> 


运行 代码 后 效果 如 图 14-8 所 示 。 
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图 14-8 ”两 端 对 齐 效果 


14.5.2 文本 字 间 距 一 一 letter-spacing 


“letter-spacing” 定 义 文本 中 字母 的 间距 (中文 为 文字 的 间距 ) ， 该 属性 取 值 为 normal 
| <length> | inherit， 其 中 ，<length> 值 是 任何 CSS 所 支持 的 长 度 值 ， 默 认 值 为 normal， 由 正 
在 使 用 的 字体 决定 。 

实例 14-7: 使 用 “letter-spacing” 属 性 实现 文本 两 端 对 齐 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.o0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html] xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>letter-spacing</title> 

<style type="text/CSS"> 


A 

h4 { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 24px; 
color: #F60; 
border-bottom-width: lpx; 
border-bottom-style: dotted; 
border-bottom-color: #C60; 

; 

> 

</style> 

</head> 

<body> 


<h4 style="letter-spacing:10px;">letter-spacing 10px 间距 </h4> 
<h4 style="letter-spacing:-2px;">letter-spacing -2px 间距 </h4> 
<h4 style="letter-spacing:0.5cm;">letter-spacing 0.5cm 间 距 </h4> 


“Ts 
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</body> 
</html> 


运行 代码 后 效果 如 图 14-9 所 示 。 正 值 用 于 增 大 间距 ， 负 值 用 于 减少 间距 。 


ETI 


letter-spacing 10px 间 距 


|| eterspacing 2px 问 距 


| 
由 etter-spacing _ 0.5cm 可 下 
| 


图 14-9 调整 字 间 距 


14.5.3 ”文本 颜色 一 一 color 


“color” 属 性 规定 文本 的 颜色 , 这 个 属性 设置 了 一 个 元 素 的 前 景色 (在 HTML 表现 中 ， 
就 是 元 素 文本 的 颜色 ); 光栅 图 像 不 受 color 影响 。 这 个 颜色 还 会 应 用 到 元 素 的 所 有 边框 ， 
除非 被 border-color 或 另外 某 个 边框 颜色 属性 覆盖 。 可 能 的 取 值 为 color name | hex_number 
| rgb_number。 

(1) color_name 规定 颜色 值 为 颜色 名 称 的 颜色 (比如 red); 规范 中 推荐 了 16 种 颜色 ， 
分 别 是 ，aqua (水 绿 )、gray ( 灰 )、navy (深蓝 )、silver ( 银 )、black 〈 黑 )、green ( 绿 )、 
olive〈 橄 槛 )、Ceal ( 深 青 )、blue〈 蓝 )、lime 〈 浅 绿 )、purple 〈 紫 )、white〈 白 )、fochsia 
(紫红 )、maroon ( 褐 )、red ( 红 )、yellow ( 黄 )。 

(2) hex_number 规定 颜色 值 为 十 六 进 制 值 的 颜色 (比如 #Ht0000); 使 用 十 六 进 制 表 
示 法 来 设置 颜色 是 最 常用 的 方法 ， 十 六 进 制 意味 着 以 十 六 为 基数 的 计数 ， 因 此 基本 单位 是 
16。 在 十 六 进 制 数 中 ， 有 效 数字 为 0 到 9 和 A 到 FF。 将 三 对 十 六 进 制 组 合成 字符 串 ， 就 可 
以 设置 颜色 了 ， 这 种 方法 的 描述 为 梳 RGGBB。 

(3) rgb_number 规定 颜色 值 为 rgb 代码 的 颜色 (比如 rgb (255,0,0))。 

除 此 之 外 ， 还 有 一 种 短 十 六 进 制 值 的 表现 颜色 方法 ， 前 面 的 十 六 进 制 每 个 颜色 值 有 六 
位 数字 ， 而 短 十 六 进 制 值 只 需要 三 位 数字 ， 址 GB。 

实例 14-8: 不 同 的 颜色 值 定义 字体 颜色 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.o0rg/TR/xhtml1/DTD/xhtml1l-transitional.dtd"> 

<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 文 本 颜色 color</title> 

<style type="text/CSS"> 

CE 

div { 
width: 160px; 
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height: 50px; 


tb 


color: #FFF; 
background-color: red; 


font-size:65px; 


font-family: Arial, Helvetica, sans-serif; 


float: left; 


可- 


} 


Polor: Fob(l2D37255 SS 
background-color: #FF5F00; 
font-size:40px; 

loats Lofts 

font-family: "微软 雅 黑 "， "黑体"; 


己 二 学 

</style> 

</head> 

<body> 

<div class="sl">color</div> 
<div class="s2"> 白 色 字 体 </div> 


</body> 
</html> 
运行 代码 后 效果 如 图 14-10 所 示 。 


EE 
ET 
OO eu man -|9[x] 
请。 和 荐 文 :可 color 全 ~- 目 - 口 


~ mp)- 2- IN(O)- “| 


QlOr 自 色 字 体 


图 14-10 文本 颜色 设置 


14.6 背景 记 


CSS 背景 (background) 属性 定义 元 素 的 背景 


边框 边界 的 所 有 空间 。 


CSS 允许 应 用 纯色 作为 背景 ， 也 允许 使 用 背景 
面 的 能 力 远 远 在 HIML 之 上 。 
“background” 是 用 于 在 一 个 声明 中 设置 所 有 背景 属性 的 一 个 简写 属性 。 通 常 建议 使 


用 这 个 


属性 ， 而 不 是 分 别 使 用 单个 属性 ， 因 为 这 个 


页 色 及 图 像 设 置 


效果 。 元 素 的 背景 区 包括 前 景 之 下 直到 


因此 ， 内 容 框 与 内 边 距 都 是 元 素 背 景 的 一 部 分 ， 且 边 框 画 在 背景 上 。 


图 像 创建 相当 复杂 的 效果 ; CSS 在 这 方 


属性 在 较 老 的 浏览 器 中 能 够 得 到 更 好 的 
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支持 ， 而 且 需 要 键入 的 字母 也 更 少 。 
具体 语法 参数 包括 : background-color | background-image | background-repeat | 
background-attachment | background-position。 


四 HTML 中 的 <body>、<div>、<p> 等 各 种 标签 都 可 以 设置 背景 。 


区 


14.6.1 设置 背景 颜色 一 一 background-color 


“background-color” 属 性 设置 元 素 的 背景 颜色 。 它 为 元 素 设置 一 种 纯色 ， 这 种 颜色 会 
填充 元 素 的 内 容 、 内 边 距 和 边框 区 域 , 扩展 到 元 素 边框 的 外 边界 。 如 果 边 框 有 透明 部 分 (如 
虚线 边框 )， 会 透 过 这 些 透明 部 分 显示 出 背景 色 。 

“transparent” 尽 管 在 大 多 数 情况 下 ,没有 必要 使 用 transparent。 不 过 如 果 用 户 不 希望 
某 元 素 拥有 背景 色 ， 同 时 又 不 希望 用 户 对 浏览 器 的 颜色 设置 影响 到 用 户 的 设计 ， 那 么 设置 
transparent 值 还 是 有 必要 的 。 

实例 14-9: 通过 多 个 图 案 展 示 背 景 颜色 ， 并 将 它 应 用 到 各 个 元 素 中 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html] xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 设 置 背景 颜色 background-color</title> 

<style type="text/css"> 


0 
body { 
background-color: #999; 
} 
div { 
height: 100px; 
width: 100px; 
border: lpx double #FFF; 
margin: Spx; 
float: left; 
| 
div#one { 
background-color: pink; 
| 
div#two { 


background-color: rgb(200,0,0); 
} 
div#three { 

background-color: #fff000; 
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div#four { 
background-color: #ffffff; 
} 
div#five { 
background-color: #fff; 
FE 
div#six { 


background-color: transparent; 


font-family: "楷体"; 
font-size: 24px; 
font-weight: bold; 
color: #FFF; 
background-color: #F90; 
float: left; 
height: 150px; 
width: 660px; 
margin: Spx; 
padding: Spx; 

} 

p:first-letter { 

font-size:45px; 

float:left; 

padding:5px 5px 0 0; 

line-height:30px; 

} 

--> 

</style> 

</head> 

<body> 

<div id='one'></div> 

<div id='two'></div> 

<div id='three'></div> 

<div id="'four'></div> 

<div id='five'></div> 

<div id="'six'></div> 

<p> 颜 色 值 支持 多 种 表示 方法 ， 请 注意 上 例 中 第 四 和 第 五 图 层 中 颜色 是 一 致 的 。#fff 使 用 了 缩写 形 
式 ， 第 六 个 图 层 使 用 了 透明 ， 请 大 家 自己 体会 。</p> 

</body> 

</html> 


运行 代码 后 效果 如 图 14-11 所 示 。 
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Rboctgrovnd- so eat 
EE EE] 
BO |e weaninisraonpesiaop css Feram = [s+ [XP sor roots 


图 14-11 设置 背景 颜色 


14.6.2 ”设置 背景 图 像 一 一 background-image 


“background-image” 属 性 把 图 像 设 置 为 背景 。 根 据 “background-repeat” 属 性 的 值 ， 
图 像 可 以 无 限 平 铺 、 沿 着 某 个 轴 (x 轴 或 y 轴 ) 平 铺 , 或 者 根本 不 平 铺 。 初始 背景 图 像 ( 原 
图 像 ) 根据 “background-position” 属 性 的 值 放置 。 


加 提示 : 设置 一 种 可 用 的 背景 颜色 ， 这 样 即 使 彰 景 图 像 不 可 用 ， 页 面 也 可 获得 良好 
的 视觉 效果 。 


14.6.3 ”背景 图 像 的 位 置 一 background-position 


“background-position” 属 性 设置 背景 图 像 的 起 始 位 置 。 背 景 图像 如 果 要 重复 , 将 从 这 
一 点 开始 。 使 用 “background-repeat” 可 以 将 一 幅 大 图 像 放置 于 文档 中 作为 背景 ， 而 且 可 以 
禁止 重复 。 于 是 用 户 可 以 先 添 加 这 幅 图 像 ， 然 后 改变 图 像 在 背景 中 的 放置 位 置 。 默 认 情况 
下 ， 能 够 识别 样式 的 浏览 器 将 从 分 配 的 显示 区 域 的 左上 角 开 始 放置 背景 图 像 ， 并 将 图 像 平 
铺 ( 如 果 需 要 的 话 ) 至 同一 区 域 的 右 下 角 。 使 用 “background-position” 属 性 时 ， 可 以 根据 
背景 图 像 的 默认 位 置 将 其 起 始 位 置 向 下 或 向 右 移动 一 个 绝对 (长度) 或 相对 百分比 或 关 
键 字 ) 的 偏 移 量 距 离 ， 可 以 为 “background-position” 属 性 指定 一 个 或 两 个 值 。 如 果 用 的 是 
一 个 值 ， 它 将 同时 应 用 于 垂直 和 水 平 位 置 。 如 果 是 两 个 值 ， 那 么 第 一 个 值 表示 水 平 偏 移 ， 
第 二 个 值 表示 垂直 偏 移 。 具 体 的 取 值 如 表 14-3 所 示 。 


表 14-3 background-position 的 属性 值 


值 
top lef | top centerltop right | center lef | center 


描述 


如 果 您 仅 规定 了 一 个 关键 词 ， 那 么 第 二 个 值 将 是 


center | center right | bottom | leftbottom center | . 
"center"。 默 认 值 : 0% 0% 


bottom right 
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描述 


第 一 个 值 是 水 平 位 置 ， 第 二 个 值 是 垂直 位 置 。 左 上 
角 是 0% 0%。 右 下 角 是 100% 100%。 如 果 您 仅 规 
定 了 一 个 值 ， 另 一 个 值 将 是 50% 
第 一 个 值 是 水 平 位 置 ， 第 二 个 值 是 垂直 位 置 。 左 上 
角 是 00。 单 位 是 像素 (Opx 0px) 或 任何 其 他 的 CSS 单 
位 。 如 果 您 仅 规定 了 一 个 值 ， 另 一 个 值 将 是 50%。 
您 可 以 混合 使 用 % 和 position 值 


x% y% 


T 


xpos ypos 


需要 把 “background-attachment” 属 性 设置 为 "fixed"， 才 能 保证 该 属性 在 Firefox 
和 Opera 中 正常 工作 。 


实例 14-10: 为 层 设置 一 个 背景 图 像 ， 并 通过 “background-position” 属 性 设置 ， 观 察 
其 中 的 不 同 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html] xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 设 置 背 景 图 片 background-image</title> 

<style type="text/CSS"> 

I 

body { 

background-color: #F2F1F1; 

background-image:url (img/bg.jpg); 


| 
et 
color: #FFF; 
background-color: #000; 
filter: Alpha (Opacity=70); 
} 
div{ 
background-image: url(img/divbg.jpg); 
border: 2px solid #CCC; 
height: 200px; 
width: 300px; 
float: left; 
margin-—left: Spx; 
} 


div#one{background-position:right bottom; } 
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div#two{background-position:-20px 40%; } 

一 -> 

</style> 

</head> 

</head> 

<body> 

<div><p> 默 认 背 景 位置 </p></div> 

<div id="one"><p> 对 齐 位 置 在 right bottom</p></div> 
<div id="two"><p> 对 齐 位 置 在 -20px 40%</p></div> 
<img src="img/divbg.jpg" width="400" height="300" /> 
</body> 

</html> 

</html> 


运行 代码 后 效果 如 图 14-12 所 示 ， 层 大 小 为 300px*200px， 背 景 图 片 在 右 下 方 ， 原 始 
大 小 为 400px*300px， 通 过 设置 不 同 的 background-position 值 ， 层 中 显示 背景 也 不 相同 ， 
注意 <p> 标 签 的 文字 背景 的 透明 是 通过 滤 镜 实现 的 ， 在 下 一 章 会 有 详细 的 介绍 。 


[MES ERiborgund mage Windows tornat Emp ree Sl 下 


SO Ep eee SI) ei 可 
贷 a 。 | 着 识 台 背 导 看 片 byckground-inage 


FE 


图 14-12 为 层 设置 背景 图 片 


14.6.4 平 铺 背 景 图 像 一 一 background-repeat 


ES 


“background-repeat” 属 性 设置 是 否 及 如 何 重复 背景 图 像 。 默 认 的 是 背景 图 像 在 水 平 
和 垂直 方向 上 重复 。 取 值 如 表 14-4 所 示 : 


表 14-4 _ background-repeat 的 属性 值 


值 描述 
Tepeat 默认 。 背 景 图 像 将 在 垂直 方向 和 水 平方 向 重复 
repeat-x 背景 图 像 将 在 水 平方 向 重复 
Tepeat-y 背景 图 像 将 在 垂直 方向 重复 


第 14 章 使 用 CSS 格式 化 网 页 


景 图 像 将 仅 显 示 一 次 
规定 应 该 从 父 元 素 继承 “background-repeat” 


实例 14-11: 为 页 面 和 图 层 添 加 背景 图 像 ， 体 会 


复方 式 对 结果 的 影响 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


<title> 平 铺 背景 图 像 background-repeat</title> 
<style type="text/CSS"> 
< 一 = 
body { 
background-repeat: repeat-x; 
background-image: url (img/bodybg.jpg); 
} 
div { 
margin: Spx; 
float: left; 
height: 100px; 
width: 220px; 
border: lpx solid #000; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 45px; 
font-weight: bolder; 
color: #000; 
text-align: center; 
} 
.one { 
background-image: url (img/bgl.jpg); 
background-repeat: no-repeat; 
} 
.two { 
background-image: url (img/bg1.jpg); 
background-repeat: repeat-x; 
上 
.three{ 
background-image: url (img/bg1.jpg); 


background-repeat: repeat-y; 
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.four{ 
background-image: url (img/bg1.jpg); 
background-repeat:repeat; 

.fivef 

background-image: url(img/bgl.jpg); 

. 

-Six{ 
background-image: url (img/bgl1.jpg); 
background-repeat: repeat-y; 
background-color: #FFF; 

} 

3 

</style> 

</head> 


<body> 

<div style="width:700px; border:none"> 
<div class="one">1</div> 
<div class="two">2</div> 
<div class="three">3</div> 
<div class="four">4</div> 
<div class="five">5</div> 
<div class="six">6</div> 
</div> 

</body> 

</html>> 


运行 代码 后 效果 如 图 14-13 所 示 ， 网 页 背景 没有 设置 平 铺 ， 但 也 默认 在 左右 和 上 下 平 
铺 显示 。 


着 干 铺 背景 避 合 background-repeat - Windows Intemet Explorer [ea 
EECEE VE 了 EU 

OO [Ov ssa eample. -| 人 |X][ SE ER 
全 届 天 。| 大 二 本 你 background-repeat 会 - 目 - 口 加 -PD)- 安 29- IRO)* 加 -“ 


IIIIIIIIIIIIIIIIIIIIS, 


5 
四 
乡 
乡 
2 
后 
乡 
加 


图 14-13 ” 平 铺 背景 图 像 


网 页 背景 是 一 个 像素 的 图 片 水 平平 铺 而 成 ，1 号 图 层 没 有 平 铺 ，4 号 是 水 平和 竖 直 都 
平 铺 ，5 号 没有 设置 平 铺 ， 默 认为 全 部 平 铺 。1、2、3 号 图 层 由 于 没有 设置 背景 色 ， 所 以 没 
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有 背景 的 地 方 默 认为 透明 ， 而 6 号 图 层 设 置 了 背景 色 ， 所 以 背景 不 透明 。 
14.5.6 图像 在 页 面 中 的 布局 一 一 background-attachment 


现在 ， 用 户 可 以 将 起 始 图 像 放 在 背景 中 的 任何 位 置 ， 也 可 以 控制 它 的 平 铺 方式 。 但 对 
很 长 的 文档 来 说 ， 如 果 只 居中 一 幅 背 景 图 像 ， 那 么 在 初始 显示 时 ， 用 户 可 能 看 不 见 背 景 医 
像 。 毕 竞 ， 浏 览 器 只 提供 一 个 有 限 的 文档 窗口 。 如 果 文 档 太 长 .那么 用 户 可 以 来 回 深 动 ， 
而 文档 中 心 可 能 要 向 下 滚动 两 三 屏 才 能 见 到 ， 或 者 刚好 就 在 浏览 器 窗口 的 下 方 。 

这 时 ， 可 以 使 用 “background-attachment” 属 性 来 控制 背景 图 片 是 否 固定 或 者 随 着 页 面 
的 其 余部 分 滚动 。 取 值 为 scrolll fixed| inherit， 其 中 scroll 为 默认 值 ， 背 景 图 像 会 随 着 页 面 
其 余部 分 的 滚动 而 移动 ; fxed 则 当 页 面 的 其 余部 分 滚动 时 ， 背 景 图 像 不 会 移动 。inherit 规 
定 从 父 元 素 继承 “background-attachment” 属 性 的 设置 。 

实例 14-12: 用 “background-attachment” 属 性 设置 固定 背景 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 图 像 在 页 面 中 的 布局 background-attachment</title> 
<style type="text/CSS"> 
body { 
background-image:url (img/bg.jpg); 
background-repeat: no-repeat; 
background-attachment: fixed; 
} 
#vv{ 
height:1628px; 
} 
</style> 
</head> 
<body> 
<div idq="vv"> 拖 动 滚动 条 ， 文 字 会 消失 ， 背 景 依然 存在 。</div> 
</body> 
</html> 


将 上 述 代码 存 为 14.12.html， 运 行 代码 查看 相应 效果 。 

背景 属性 能 够 综合 到 一 个 缩 略 属性 中 : back-ground。 这 一 属性 能 从 其 他 每 个 背景 属性 
中 各 取 一 个 值 ， 可 按 任意 顺序 排列 ， 背 景 属性 取 值 的 排列 顺序 只 有 一 个 小 的 约束 ， 即 当 背 
景 位 置 有 两 个 取 值 时 ， 它 们 必须 同时 出 现 ， 水 平 值 在 前 ， 垂 直 值 在 后 ， 如 background | 
background-colorlbackground-imagelbackground-repeatlbackground-attachmentlbackground- 


position。 
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14.7 设置 边框 


在 CSS 中 ， 所 有 文档 元 素 都 生成 一 个 矩形 框 ， 称 之 为 元 素 框 ， 这 个 框 描述 元 素 及 其 
属性 在 文档 布局 中 所 占 的 空间 大 小 ， 因 此 每 个 框 都 可 以 影响 其 他 元 素 的 位 置 及 大 小 。 

通常 情况 下 ， 一 个 元 素 的 “width” 属 性 定义 为 左 侧 内 部 边线 到 右 侧 内 部 边线 的 距离 ， 
“height” 属 性 定义 为 上 内 边线 到 下 内 边线 的 距离 。 它们 都 可 应 用 于 元 素 的 特性 , 如 图 14-14 
所 示 。 


top 
边界 margin 


left 内 雁 content right 


bottom 


图 14-14 CSS 盒 状 关系 图 


为 了 给 出 一 个 元 素 的 四 种 边框 的 不 同 值 ， 网 页 制作 者 必须 用 一 个 或 更 多 属性 ， 如 上 边 
框 、 右 边框 、 下 边框 、 左 边框 、 边 框 颜色 、 边 框 宽度 、 边 框 样式 、 上 边框 宽度 、 右 边框 宽 
度 、 下 边框 宽度 或 左边 框 宽度 等 。 元 素 的 边框 (border) 就 是 一 条 (有 时 是 多 条 ) 围绕 着 
元 素 内 容 及 补 白 的 线 。 元 素 的 背景 会 结束 于 边框 的 外 边缘 ， 因 为 背景 不 延伸 到 边界 ， 而 边 
框 恰恰 位 于 边界 的 内 部 。 每 种 边框 都 有 三 个 特征 宽度 或 高 度 、 式 样 或 外 观 及 颜色 。 


14.7.1 边框 的 风格 


1. 边框 宽度 一 一 border-width 


有 四 种 指定 边框 宽度 的 方法 : [thin | medium | thick | <length>]。 其 中 ，thin，medium 
(默认 值 》 和 thick 仅 简 单 定义 了 相互 关系 ， 没 有 与 某 特 定 的 宽度 对 应 。 


则 设 上 下 边框 为 第 一 个 值 ， 左 右边 框 为 第 二 个 值 ; 如 果 包 括 三 个 值 ， 则 第 一 个 值 
是 上 边框 ， 第 二 个 是 左右 边框 ， 第 三 个 值 是 下 边框 ; 如 果 包括 四 个 值 ， 则 指定 了 
每 一 面 的 宽度 。 按 上 、 右 、 下 、 左 边框 的 顺 时 针 顺 序 分 配 。 


实例 14-13: 通过 “border-width” 属 性 设置 文本 区 域 的 边框 宽度 为 1 像素 


"ss 
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.o0rg/TR/xhtmll1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.o0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 边 框 宽度 Border-width</title> 

<style type="text/CSS"> 


Se 
textareal{ 
FONT-SIZE: 12px; 
FONT-FAMILY:  "Rrial"7 
border: 1px dashed #F60;/* 边 框 宽度 为 1 像素 */ 
F 
E> 
</style> 
</head> 
<body> 
<form id="forml" name="forml" method="post" action=""> 
<label> 
<textarea name="textarea" id="textarea"” cols="45" rows="5"> 本 文本 区 域 格 
式 为 : 


FONT-SIZE: 12px; 

FONT-FAMILY: "Arial"; 

border-width:1lpx; </textarea> 
</label> 

</form> 

</body> 

</html> 


运行 代码 后 效果 如 图 14-15 所 示 。 
栓 突 度 Border-width - Wi | 

| 文件 (月 ”六 时 (E) 可 看 (V) 收 襄 夫 (A) 工具 (T) 帮助 (H) 

OO [el wserdministratonDesktop\csstt [s+ [x ||P Seareh Resuhs 万 = 

宽 《大 灾 。 基 边 要 殉 度 Border-width 


NT-SIZE: 12px 
SFONT-FAMILY: “Ariaf” 
‘border. 1px dashed #60; 


羌 成 于 计算 册 | 保护 模式 禁用 种 ” 蕊 100% = 


图 14-15 边框 宽度 


ee 
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可 以 使 用 下 列 同等 属性 之 一 : border-top-width, border-right-width,， border-bottom-width 
和 borderleft-width， 每 个 属性 用 于 设 定 一 特定 侧 的 边框 宽度 ， 像 下 面 的 样式 表 一 样 ， 用 户 
可 以 设置 只 有 一 个 像素 的 下 边框 , 打造 属于 自己 特定 风格 输入 框 和 文本 区 域 。 其 语法 如 下 : 


<style type="text/css"> 
<!—— 

INPUT, textarea { 
FONT-SIZE: 12px; 
FONT-FAMILY: "Arial"™; 
border-left-width:0px; 
/* 左 边框 宽度 为 0 像素 */ 
border-right-width:0px; 
/* 右 边框 宽度 为 0 像素 */ 
border-top-width:0px; 

/* 上 边框 宽度 为 0 像素 */ 
border-bottom-width:1px; 
/* 下 边框 宽度 为 1 像素 */ 

} 

SE 

</style> 


2. 边框 样式 一 一 border-style 


CSS 定义 了 9 种 不 同样 式 的 “border-style” 属 性 ， 包 括 缺 省 值 none。 详 细 的 取 值 如 表 
14-5 所 示 : 


表 14-5 ”border-left-style 的 属性 值 


值 描述 
none 无 边框 
dotted 边框 由 点 组 成 
dashed 边框 由 短线 组 成 
solid 边框 是 实 线 
double 边框 是 双 实 线 
peroove 边框 带 有 立体 感 的 沟 槽 
Tidge 边框 成 硝 形 
inset 边框 内 嵌 一 个 立体 边框 
outset 边框 外 嵌 一 个 立体 边框 


加 可 以 使 用 下 列 同等 属性 之 一 : border-top-style，border-right-style，border-bottom- 
style 和 border-left-style， 每 个 属性 用 于 设 定 一 个 特定 侧 的 边框 样式 ， 如 同 边界 属 
性 那样 。 
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实例 14-14: 制作 一 个 网 页 ， 用 不 同 的 层 演示 九 种 边框 样式 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.o0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.o0rg/1999/xhtml"> 

<head> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 边 框 样式 Border-style</title> 
<style type="text/css"> 


nS 


div 


} 
.dl 
2 
=d3 
.d4 
ds 
.d6 
ady 
.d8 
9 
== 
</st 
</he 
<bod: 


{ 


float: left; 
height: S50px; 
width: 200px; 


margin: 2px; 


padding: Spx; 


{border-style:none;} 


{border-style:solid;} 

{border-style:dotted;} 
{border-style:dashed;} 
{border-style:double;} 


{border-style:groove;} 


{border-style:ridge;} 


{border-style:inset;} 


{border-style:outset;} 


yle> 
ad> 
y> 


<div style="width:700px"> 
<div> 这 个 div 的 Css 边框 风格 (border-style) 属性 缺 省 值 是 none。</div> 


<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 
<div 
</di 
</bo 


class 
class 
class 
class 
class 
class 
class 
class 
class 
V> 
dy> 


</html> 


= "dl"> 这 个 div 的 Css 边框 风格 (border-style) 属 性 是 none。</div> 
"d2"> 这 个 div 的 Css 边框 风格 (border-style) 属 性 是 solid。</div> 
"qd3"> 这 个 div 的 css 边框 风格 (border-style) 属 性 是 dotted。</div> 
"d4"> 这 个 div 的 Css 边框 风格 (border-style) 属 性 是 dashed。</div> 
"qd5"> 这 个 div 的 css 边框 风格 (border-style) 属 性 是 double。</div> 
"qd6"> 这 个 div 的 CSS 边框 风格 (border-style) 属 性 是 groove。</div> 
"qd7"> 这 个 div 的 Css 边框 风格 (border-style) 属 性 是 ridge。</div> 
"d8"> 这 个 div 的 Css 边框 风格 (border-style) 属 性 是 inset。</div> 
d9"> 这 个 div 的 css 边框 风格 (border-style) 属性 是 outset。</div> 


eh 
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运行 代码 效果 如 图 14-16 所 示 。 


要 文件 (月 轧 疆 (E) ”可 看 (V) 插入 (修改 (KM) ”格式 (0) 会 令 (站 点 (S) 宣 口 W) 帮助 (H) | 国 ” 作 - 有 &v 
| 寺 jj 代 到 |- 当 拆 分 | 司 设计] | | 因 刘 挤 图 |w 实时 代码 | 。 标题 过 杠 样 式 prarvil。 | 只 @ 下 


这 个 di 的 Css 边框 风格 这 个 di 的 CSS 边 框 风格 这 个 dk 的 CSS 边 框 风格 
(border-style) 属 性 缺 省 值 是 。 (border-style) 属 性 是 none。 (border-style) 属 性 是 : 


这 个 和 h 的 Css 边 框 风 格 “这 个 ge 的 css 边框 风 格 


个 div 的 CSS 边 框 风格 
iorder- style) 属 性 是 dotted。 (border-style) 属 性 是 dashed。 


这 个 dv 的 CSS 边 框 风格 这 个 gm 的 CSS 边 框 风格 这 个 的 CSS 边 框 风格 
(border-style) 属 性 是 groove。 | (border-style) 属 性 是 ridge。 (border-style) 属 性 是 inset。 


这 个 dv 的 CSS 边 框 风格 
(border-style) 属 性 是 outset。 


图 14-16 九 种 边框 样式 演示 


14.7.2 ”边框 的 颜色 一 一 border-color 
“border-color” 属 性 用 来 设置 对 象 的 边框 颜色 。 


加 可 以 使 用 下 列 同 等 属性 之 一 : border-top-color、 border-right-color、 rder-bottom-color 
和 border-left-color, 每 个 属性 用 于 设 定 一 个 特定 的 边框 颜色 , 如 同 边 界 属性 那样 。 


就 像 前 面 很 多 属性 那样 ， 可 以 用 “border” 属 性 同时 控制 边框 的 四 个 侧面 。 可 以 接受 
一 个 或 所 有 边框 的 宽度 、 颜 色 和 样式 值 中 的 一 个 或 所 有 值 。border-top 、borderbottom、 
border-left、border-right 属性 只 影响 对 应 的 边框 侧面 。 请 将 下 列 代码 作为 外 部 样式 表 链 接 到 
网 页 中 ， 观 察 对 input 和 textarea 的 定义 。 


<style type="text/css"> 


GS 

input, textarea { 

font-size: 12px; 

font-family: "Arial"; 
border-left:#0066CC dashed lpx; 
/* 左 边框 颜色 为 #0066CCc， 虚 线 ，1 像素 */ 
border-right:#0066CC dashed lpx; 
/x* 右 边框 颜色 为 #0066CC， 虚 线 ，1 像素 */ 
border-top:#FF9900 double 3px; 
/* 上 边框 颜色 为 #4EF9900， 双 线 ，3 像素 */ 
border-bottom:#FF9900 double 3px; 
/* 下 边框 颜色 为 #FF9900， 双 线 ，3 像素 */ 
} 

一 -> 


</style> 


.254。 
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14.8 设置 边 距 


最 基本 的 可 加 到 元 素 上 的 是 边界 。 它 们 在 元 素 周围 生成 额外 空白 区 。“ 空 白 区 ”通常 
是 指 其 他 元 素 不 能 出 现 但 父 元 素 背 景 可 见 的 区 域 。 


14.8.1 边 距 一 一 margin 


最 简单 的 设置 边界 的 方法 是 使 用 “margin” 属 性 ，“margin ”属性 值 可 采用 任何 长 度 
度量 单位 ， 如 像素 、 英 寸 、 毫 米 或 em， 还 可 以 定义 边界 为 auto。 其 语法 为 : 


margin:<length> |< 百 分 比 >lauto 


bottom 属性 都 接受 长 度 或 百分比 值 ， 指 定 元 素 周围 要 保留 多 少 空 白 。 使 用 这 些 属 
性 中 的 每 一 个 都 可 以 只 设 定 该 侧 的 边界 ， 而 不 会 直接 影响 其 他 边界 。 可 以 在 一 个 
规则 中 使 用 多 于 一 个 的 单 侧 属性 。 


14.8.2 ”内 边界 一 一 padding 

内 边界 位 于 元 素 框 的 边界 与 内 容 区 之 间 ， 与 外 边界 属性 一 样 ， 其 语法 为 : 

padding:<length> | < 百分比 > 

也 可 以 单独 指定 元 素 单 侧 内 边界 的 值 。padding-left、padding-right、padding-top 和 
padding-bottom 属性 都 接受 长 度 或 百分比 值 ， 指 定 元 素 周 围 要 保留 多 少 空 白 。 使 用 这 些 属 
性 中 的 任何 一 个 可 以 只 设 定 该 侧 的 内 边界 ， 而 不 会 直接 影响 其 他 边界 。 可 以 在 一 个 规则 中 
使 用 多 于 一 个 的 单 侧 属 性 。 

实例 14-15: 利用 边 距 制作 一 个 相册 页 面 ， 要 求 将 图 像 宽度 统一 成 220px， 并 且 保 持 图 
片 的 宽 高 比 不 变 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.o0rg/TR/xhtml1/DTD/xhtml1l-transitional.dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 


<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 相 册 </title> 

<style type="text/CSS"> 

= 

img { 


width: 220px; 
F 


i 
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-photoone { 
margin: Spx; 
float: left; 
width: 220px; 
border: 4px solid #999; 
padding: 5px; 
二 = 
</style> 
</head> 
<body> 
<div style="width:800px"> 
<div class="photoone"><img src="img/bg.jpg"/></div> 


<div class="photoone"><img src="img/bg.jpg"/></div> 
<div class="photoone"><img src="img/bg.jpg"/></div> 
<div class="photoone"><img src="img/divbg.jpg"/></div> 
<div class="photoone"><img src="img/divbg.jpg"/></div> 
<div class="photoone"><img src="img/divbg.jpg"/></div> 
</div> 

</body> 

</html> 


运行 代码 后 效果 如 图 14-17 所 示 。 用 户 也 可 尝试 使 用 图 片 背景 ， 制 作 属 于 自己 的 个 性 


re 


-Windows Internet 


© |[@) GuserswdministratonDeskdopvcss 教 村 了 \ex “| 好 | X | 月 Search Results pr| 
这 收 基 关 大 


站 浆 二 
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14.9 ”网 页 超 链 接 设置 


14.9.1 网 页 链接 属性 


CSS 为 一 些 特殊 效果 准备 了 特定 的 工具 ， 称 之 为 “ 伪 类 ”。 其 中 ， 有 几 项 是 用 户 经 常 
用 到 的 ， 下 面 详细 介绍 经 常用 于 定义 链接 样式 的 四 个 伪 类 ， 它 们 分 别 是 : link | visited | hover | 
active。a:link 定义 正常 链接 的 样式 ， a:visited 定义 已 访问 过 链接 的 样式 ，a:hover， 定 义 鼠 
标 悬 浮 在 链接 上 时 的 样式 ，a:active， 定 义 鼠 标点 击 链接 时 的 样式 。 因 为 要 定义 链接 样式 ， 
所 以 其 中 必 不 可 少 的 就 是 超级 链接 中 的 锚 标 签 ， 锚 标签 和 伪 类 链接 起 来 书写 的 方法 就 是 定 
义 链接 样式 的 基础 方法 。 其 语法 如 下 : 


aslink { 

color:#FF0000; 
text-decoration:underline; 
} 
a:visited { 
Color:#00FF00; 
text-decoration:none; 
} 
a:hover { 
color:#000000; 
text-decoration:none; 
} 
a:active { 
Color:#FFFFFF; 
text-decoration:none; 


} 


上 面 示例 中 定义 的 链接 颜色 是 红色 ， 访 问 过 后 的 链接 是 绿色 ， 鼠 标 巧 浮 在 链接 上 时 是 
黑色 ， 点 击 时 的 颜色 是 白色 。 

如 果 正 常 链接 和 已 访问 过 的 链接 样式 相同 ， 鼠 标 莫 浮 和 点 击 时 的 样式 相同 ， 也 可 以 将 
它们 合并 起 来 定义 ， 其 语法 为 : 


a:link, a:visited { 
color:#FF0000; 
text-decoration:underline; 
a:hover, a:active { 
color:#000000; 
text-decoration:none; 


让 


人 
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加 链接 定义 是 有 规则 的 ， 如 果 这 四 项 的 书写 顺序 稍 有 差错 ， 链 接 的 效果 可 能 就 没有 
了 ， 所 以 每 次 定义 链接 样式 时 务必 确认 定义 的 顺序 ，link--visited--hover-active， 
i 也 就 是 我 们 常 说 的 LoVe HAI 原则 (大写 字母 就 是 它们 的 首 字母 ) 。 
在 CSS 中 写 上 a:linkf} 这 样 的 定义 会 使 整个 页 面 的 链接 样式 改变 ,但 有 些 局 部 链接 需 
要 特殊 化 ， 则 可 以 通过 在 链接 样式 定义 的 前 面 加 上 指定 的 id 或 class 来 解决 。 其 语法 为 : 


#sidebar a:link, #sidebar a:visited { 
color:#FF0000; 

text-decoration:none; 

} 

#sidebar a:hover, #sidebar a:active { 
color:#000000; 
text-decoration:underline; 


} 


14.9.2 ”添加 滚动 条 属性 


利用 CSS 可 以 个 性 化 设置 滚动 条 的 颜色 ， 使 之 与 网 页 的 颜色 及 特点 相 搭配 ， 从 而 显示 
出 更 好 的 效果 。 常 用 的 属性 及 其 说 明 如 表 14-6 所 示 : 


表 14-6 CSS 属性 值 


设置 当 对 象 的 内 容 超 过 其 指 | visible: 扩大 面积 以 显示 所 有 内 容 
定 宽度 时 如 何 管理 内 容 auto: 仅 当 内 容 超 出 限定 值 时 添加 滚动 条 
设置 当 对 象 的 内 容 超 过 其 指 | hidden: 总 是 隐藏 滚动 条 

高 度 时 如 何 管理 内 容 
设置 或 检索 滚动 条 3D 界面 的 亮 边 框 颜色 
设置 或 检索 滚动 条 3D 界面 的 亮 边框 颜色 
设置 或 检索 滚动 条 3D 表面 的 颜色 

设置 或 检索 滚动 条 方向 箭头 的 颜色 
设置 或 检索 滚动 条 3D 界面 的 暗 边框 颜色 
设置 或 检索 滚动 条 暗 边框 颜色 
设置 或 检索 滚动 条 轨迹 的 颜色 
设置 或 检索 滚动 条 基准 颜色 


overflow-x 


overflow-y 


scroll: 总 是 显示 滚动 条 


scrollbar-3d- lig 
scrollbar- highlight-color 


scrollbar- face-color 


scrollbar- arrow-color 


scrollbar- shadow-color 


scrollbar-dark- shadow-color 


scrollbar- track-color 


scrollbar- base-color 


实例 14-16: 在 图 层 中 加 入 纵向 滚动 条 ， 并 设置 滨 动 条 样式 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1-0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 


i 
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<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<tit1le> 滚 动 条 属性 </title> 

</head> 

<html> 

<head> 

<style type="text/CSS"> 

SL 

div{ 
SCROLLBAR-FACE-COLOR: #FF99CC; 
SCROLLBAR-HIGHLIGHT-COLOR: #FF99CC; 
SCROLLBAR-SHADOW-COLOR: #CCOOCC; 
SCROLLBAR-3DLIGHT-COLOR: #FFCCFF; 
SCROLLBAR-ARROW-COLOR:#990099; 
SCROLLBAR-TRACK-COLOR: #FF66CC; 
SCROLLBAR-DARKSHADOW-COLOR: #9900FF; 
float: left; 
height: 200px; 
width: 400px; 
overflow-y:scroll; 
overflow-x:hidden; 

; 

Ee 

</style> 

</head> 

<body> 

<div> 

<p> 深 动 条 3D 表面 的 颜色 为 #FF99CC<br /> 
滚动 条 亮 边框 的 颜色 为 #FF99CC<br /> 
滚动 条 3D 界面 的 暗 边框 颜色 为 #CC00Cc<br /> 
滚动 条 3D 界面 的 亮 边框 颜色 为 #FFCCFF<br /> 
滚动 条 方向 箭头 的 颜色 为 #990099<br /> 
滚动 条 轨迹 的 颜色 为 #FF66CC<br /> 
滚动 条 暗 边框 的 颜色 为 #9900FF </p> 
<p> 由 于 设置 了 overflow-y:scrol1;<br /> 

overflow-x:hidden; 水 平方 向 上 不 再 有 滚动 条 。</pP> 

</div> 

</body> 

</html> 


运行 代码 后 效果 如 图 14-18 所 示 。 


"he 
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关 源 动 怕 性 - Windows ntemet Explorer 全 下 
HP RAS BEV WRN IRT HHH  ，、 
加 口 - | CAUsersAdministraton\Desk -| 人 菇 | X || Search Results Pr 
宽 收 草 夫 | 大 语 坟 冬 属性 


3D 表 面 的 颜色 为 丰 F99CC 
边框 的 颜色 为 姓 F99CC 

党 D 界 面 的 暗 边框 颜色 为 #CC00Cc 

DEE 

滚动 条 方向 和 算式 的 颜色 为 #99009 


| 
辕 ci 也 计算 机 | 保护 模式 可 用 种 ~ 所 100% > 


图 14-18 设置 图 层 滚动 条 


14.9.3 ”设置 光标 属性 


通过 “cursor” 属 性 可 以 改变 光标 形状 ， 光 标 放 在 被 此 项 设置 修饰 的 区 域 上 时 ， 形 状 会 
发 生 改变 。 其 语法 为 : 


Cursor: 属性 值 ， 
属性 值 表示 的 含义 如 表 14-7 所 示 : 


表 14-7 cursor 属 性 


形状 值 描 述 
也 hand 手 
十 crosshair 交叉 十 字 
I text 文本 选择 符号 
及 wait Windows 的 沙漏 形状 
N? help 带 问 号 的 光标 
中 move 可 移动 对 象 
+ e-resize 向 右 改变 大 小 (East) 
” ne-resize 向 上 右 改变 大 小 (North East) 
~ nw-resize 向 上 左 改 变 大 小 (North West) 
i S-TesiZze 向 下 改变 大 小 (South) 
& 用 户 自 定义 (可 用 动画 ) (注意 文件 格式 必须 为 ，.cur 或 .ani) 
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14.10 CSS 区 域 及 定位 


CSS 有 三 种 基本 的 定位 机 制 :普通 流 、 浮 动 和 绝对 定位 。CSS 为 定位 和 浮动 提供 了 一 
些 属性 ， 利 用 这 些 属性 ， 可 以 建立 列 式 布局 ， 将 布局 的 一 部 分 与 男 一 部 分 重 辣 ， 还 可 以 完 
成 多 年 来 通常 需要 使 用 多 个 表格 才能 完成 的 任务 。 定 位 的 基本 思想 很 简单 ， 文 档 中 的 每 个 
元 素 都 可 以 放 在 一 个 矩形 区 域内 , 通过 CSS 可 以 控制 包含 于 文档 中 的 元 素 的 区 域 大 小 、 外 
观 和 位 置 。 它 允许 用 户 定义 元 素 框 相对 于 其 正常 位 置 应 该 出 现 的 位 置 , 或 者 相对 于 父 元 素 、 
另 一 个 元 素 甚至 浏览 器 窗口 本 身 的 位 置 。 显 然 ， 这 个 功能 非常 强大 。 

另 一 方面 ,CSS1 中 首次 提出 了 浮动 , 它 以 Netscape 在 Web 发 展 初期 增加 的 一 个 功能 
为 基础 。 浮 动 不 完 全 是 定位 ， 不 过 ， 它 当然 也 不 是 正常 流 布局 。 用 户 会 在 后 面 的 章节 中 明 
确 浮动 的 含义 。 除 非 专门 指定 ， 否 则 所 有 框 都 在 普通 流 中 定位 。 也 就 是 说 ， 普 通 流 中 元 素 
的 位 置 由 元 素 在 COHTML 中 的 位 置 决定 。 

块 级 框 从 上 到 下 一 个 接 一 个 地 排列 ， 框 之 间 的 垂直 距离 是 由 框 的 垂直 外 边 距 计算 出 
来 。 行 内 框 在 一 行 中 水 平 布置 。 可 以 使 用 水 平 内 边 距 、 边 框 和 外 边 距 调整 它们 的 间距 。 但 
是 , 垂直 内 边 距 、 边 框 和 外 边 距 不 影响 行内 框 的 高 度 。 由 一 行 形成 的 水 平 框 称 为 行 框 (Line 
Box) ， 行 框 的 高 度 总 是 足以 容纳 它 包含 的 所 有 行内 框 。 不 过 ， 设 置 行 高 可 以 增加 这 个 框 
的 高 度 。 


14.10.1 定位 属性 一 一 position 


定位 的 思路 其 实 非常 简单 ， 它 允许 用 户 精 确定 义 元 素 框 出 现 的 相对 位 置 ， 可 以 相对 于 
它 通常 出 现 的 位 置 ， 相 对 于 其 上 级 元 素 ， 相 对 于 另 一 个 元 素 甚 至 可 以 是 相对 于 浏览 器 视窗 
本 身 。 每 个 显示 元 素 都 可 以 用 定位 的 方法 来 描述 。 毕 竞 ， 任 何 元 素 都 是 放置 在 屏幕 上 ， 它 
们 有 位 置 且 必须 被 定位 。 可 以 使 用 position 属性 设置 对 象 的 位 置 。 其 语法 为 : 
position:static | relative | absolute | fixed | inherit 


定位 属性 position 属性 值 如 表 14-8 所 示 : 
表 14-8 position 的 属性 值 


属性 值 说 了 明 

a 元 素 框 按 普通 方式 生成 。 块 级 元 素 生成 一 个 矩形 框 ， 它 是 文档 流 的 一 部 分 ， 内 联 级 杠 
是 由 一 个 或 多 个 行 框 的 上 下 文生 成 的 ， 这 些 行 框 流动 于 其 上 级 元 素 中 
元 素 框 按 普通 方式 生成 。 块 级 元 素 生成 一 个 矩形 框 ， 它 是 文档 流 的 一 部 分 ， 内 联 级 框 
是 由 一 个 或 多 个 行 框 的 上 下 文生 成 的 ， 这 些 行 框 流动 于 其 上 级 元 素 中 元 素 框 偏 移 一 定 

ee 的 距离 。 它 的 包含 块 是 未 定位 元 素 将 占有 的 区 域 。 元 素 保留 未 被 定位 时 的 形状 ， 且 元 


素 通 常 占有 的 空间 也 被 保留 。 相 对 定位 完成 的 过 程 是 首先 按 static 方式 生成 一 个 元 素 ， 
然后 移动 这 个 元 素 框 (或 多 个 框 ， 在 内 联 元 素 跨越 多 个 行 的 情况 下 )。 有 可 能 定位 元 素 
会 重 登 其 他 内 容 。 偏 移 的 方向 及 幅度 由 top、right、bottom 和 left 属性 联合 指定 
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( 续 表 ) 
属性 值 说 明 
元 素 框 完全 从 文档 流 中 消除 并 根据 其 包含 块 定位 。 元 素 在 普通 文档 流 中 占有 的 任何 空 
间 都 被 关闭 , 就 如 同 元 素 不 存在 一 样 。 元 素 的 大 小 及 位 置 由 属性 height width, top, right, 
bottom, lef， 加 上 为 元 素 设置 的 内 外 边界 和 边框 联合 定义 。 绝 对 定位 元 素 可 以 有 边界 ， 
但 这 些 边 界 不 压缩 
二 元 素 的 定位 方式 同 absolute 一 样 ， 但 它 的 包含 块 是 视 区 本 身 。 在 Web 浏览 器 中 ， 元 素 
在 文档 滚动 时 不 会 在 浏览 器 视窗 中 移动 
inherit 这 个 值 从 其 上 级 元 素 继承 得 到 


定位 元 素 的 边 相 对 于 其 包含 块 的 偏 移 ， 因 此 成 为 边 偏 移 量 属性 ， 这 些 属 性 描述 了 从 包 
含 块 最 近 的 边 开 始 的 偏 移 量 。 例 如 ，left 描述 了 定位 元 素 的 左边 缘 应 放置 于 距 其 包含 块 左 
边缘 多 远 处 。 对 于 left 而 言 ， 正 值 会 使 定位 元 素 的 左边 缘 向 右 移 动 ， 而 负 值 会 使 它 移 到 包 
含 块 左边 缘 的 左 方 。 在 定位 元 素 的 过 程 中 ， 元 素 的 所 有 部 分 都 被 移动 ， 包 括 内 外 边界 、 边 
框 及 内 容 。 换 句 话说 ， 有 可 能 为 定位 元 素 设置 内 外 边界 和 边框 。 这 些 会 同 定位 元 素 保持 在 
一 起 ， 且 包含 于 由 边 偏 移 量 属性 定义 的 区 域 中 。 

1. 区域 的 相对 定位 

相对 定位 是 一 个 非常 容易 掌握 的 概念 。 如 果 对 一 个 元 素 进行 相对 定位 ， 它 将 出 现在 其 
所 在 的 位 置 上 。 然 后 ， 可 以 通过 设置 乖 直 或 水 平 位 置 ， 让 这 个 元 素 “ 相 对 于 ” 它 的 起 点 进 
行 移动 。 

如 图 14-19 所 示 ， 如 果 将 框 2 的 top 设置 为 20px，left 设置 为 30px， 那 么 框 将 在 原 位 
置顶 部 创建 20 像素 的 地 方 ， 左 边 创建 30 像素 的 空间 ， 也 就 是 将 元 素 向 右 移动 。 


一 一 一 一 
left:30px 


BE 


外 注意 , 在 使 用 相对 定位 时 , 无 论 是 否 进行 移动 ,元素 仍 然 占 据 原 来 的 空间 。 因此， 
移动 元 素 会 导致 它 履 盖 其 他 框 ( 框 3) 。 


2. 区 域 的 绝对 定位 


绝对 定位 使 元 素 的 位 置 与 文档 流 无 关 ， 因 此 不 占据 空间 。 这 一 点 与 相对 定位 不 同 ， 相 
对 定位 实际 上 被 看 作 普 通 流 定位 模型 的 一 部 分 ， 因 为 元 素 的 位 置 相 对 于 它 在 普通 流 中 的 位 
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置 。 普 通 流 中 其 他 元 素 的 布局 就 像 绝 对 定位 的 元 素 不 存在 一 样 。 
如 图 14-20 所 示 ， 绝 对 定位 的 元 素 的 位 置 相对 于 最 近 的 已 定位 祖先 元 素 ， 如 果 元 素 没 
有 已 定位 的 祖先 元 素 ， 那 么 它 的 位 置 相对 于 最 初 的 包含 块 。 


因为 绝对 定位 的 框 与 文档 流 无 关 ， 所 以 它们 可 以 履 盖 页 面 上 的 其 他 元 素 ; 可 以 通 
过 设置 z-index 属性 来 控制 这 些 框 的 堆放 次 序 。 


14.10.2” 层 又 顺序 一 一 z-index 


在 使 用 元 素 定位 时 ， 从 可 视角 度 来 讲 ， 不 可 避免 地 会 发 生 两 个 元 素 试图 同时 出 现 于 同 
一 位 置 的 情况 。 那 么 其 中 一 个 就 会 覆盖 另外 一 个 。 这 时 ， 如 果 将 网 页 的 二 维 空间 延伸 到 三 
维 空间 ， 就 可 以 解决 这 个 问题 ， 和 很 多 图 像 处 理 软件 一 样 ， 这 里 也 是 用 层 来 解决 问题 。 

“z-index” 属 性 允许 网 页 制作 者 改变 元 素 相互 重 炙 的 顺序 。 其 名 字 由 坐标 系 得 来 ， 在 
坐标 系 中 ， 从 水 平方 向 一 侧 到 另 一 侧 叫做 x 轴 ， 从 垂直 方向 的 上 端 到 下 端 叫做 y 轴 。 在 这 
种 情况 下 ， 把 从 前 到 后 ， 或 从 近 到 远 叫 做 z 轴 。 这 样 ， 沿 着 这 条 轴 的 元 素 使 用 Z-index 属 
性 值 来 代表 。 在 这 个 坐标 系 中 ，“z-index” 属 性 值 高 的 元 素 比 “z-index” 属 性 值 低 的 元 素 
更 靠近 浏览 者 。 

实例 14-17: 不 使 用 背景 ， 将 文字 县 放 在 图 片上 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 层 县 顺序 z-index</title> 

<style type="text/CSS"> 

img.x 

: 

position:absolute; 

left :0px; 

top: Opx; 

z-index:—1 
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:2 
font-size: 36px; 
color: #000; 
font-family: "黑体 "， "楷体"; 
} 
</style> 
</head> 
<body> 
<h1> 这 是 一 个 标题 </h1> 
<img class="x" src="img/divbg.jpg" /> 
<p> 默 认 的 z-index 是 0。z-index -1 拥有 更 低 的 优先 级 。</p> 
</body> 
</html> 


运行 代码 后 效果 如 图 14-21 所 示 , 将 图 片 的 z-index 值 改变 后 , 图 片 就 出 现在 文字 下 方 。 


ERROR ECORETT 
OO Te | 


EPC SEE] 


图 14.21 层 辣 顺序 


14.10.3 浮动 属性 一 -float 

CSS 允许 任何 元 素 浮 动 ， 在 CSS 中 ， 是 由 属性 “float” 来 完成 的 。 其 语法 为 : 

float:left | right | none 

浮动 的 框 可 以 向 左 或 向 右 移 动 ， 直 到 它 的 外 边缘 碰 到 包含 框 或 男 一 个 浮动 框 的 边框 为 
止 。 由 于 浮动 框 不 在 文档 的 普通 流 中 ， 所 以 文档 的 普通 流 中 的 块 框 表现 得 就 像 浮动 框 不 存 
在 一 样 。 

实例 14-18: 观察 “float” 属 性 对 图 层 定位 的 影响 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.0rg/TR/xhtmll1/DTD/xhtmll-transitional.dtd"> 


<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
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<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 浮 动 属性 float</title> 
<style type="text/CSS"> 
<!-—— 
div#divbig { 
border: lpx solid #000; 
background-color: #F60; 
margin: 2px; 
float: lefts 
height: 200px; 
width: 200px; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 15px; 
Color: #fff; 
overflow: visible; 
} 
div#divsmall { 
border: lpx solid #000; 
background-color: #D6D6D6; 
background-image: url (img/bgl1.jpg); 
margin: 2px; 
height:50px; 
width: 50px; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 36px; 
color: #000; 


color: #000; 
background-color: #FFF; 


= 

</style> 

</head> 

<body> 

<div id="divbig"> 

<div id="divsmall">1</div> 
<div id="divsmall">2</div> 
<div id="divsmall">3</div> 
<p > 本 图 层 中 都 没有 浮动 </p> 
</div> 

<div id="divbig"> 

<div id="divsmall" style="float:right" >1l</div> 
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<div id="divsmall">2</div> 

<div id="divsmall">3</div> 

<p> 当 把 框 1 向 右 浮动 时 ， 它 脱离 文档 流 并 且 向 右 移动 ， 直 到 它 的 右边 缘 碰 到 包含 框 的 右边 缘 </p> 

</div> 

<div id="divbig"> 

<div id="divsmall" style="float:left">1</div> 

<div id="divsmall">2</div> 

<div id="divsmall">3</div> 

<p> 当 框 1 向 左 浮动 时 ， 它 脱离 文档 流 并 且 向 左 移动 ， 直 到 它 的 左边 缘 碰 到 包含 框 的 左边 缘 。 因 为 
它 不 再 处 于 文档 流 中 ， 所 以 它 不 占据 空间 。</p> 

</div> 

<div id="divbig"> 

<div id="divsmall" style="float:left">1</div> 

<div id="divsmall" style="float:left">2</div> 

<div id="divsmall" style="float:left">3</div> 

<p> 如 果 把 所 有 三 个 框 都 向 左 移动 ， 那 么 框 1 向 左 浮 动 直到 碰 到 包含 框 ， 另 外 两 个 框 向 左 浮动 直到 
碰 到 前 一 个 浮动 框 。</p> 

</div> 

<div id="divbig"> 

<div id="divsmall" style="float:left; height:100px">1</div> 

<div id="divsmall" style="float:left; width:120px">2</div> 

<div id="divsmall" style="float:left">3</div> 

<p> 如 果 包 含 框 太 窄 ， 无 法 容纳 水 平 排列 的 三 个 浮动 元 素 ， 那 么 其 他 浮动 块 向 下 移动 ， 直 到 有 足够 
的 空间 。 如 果 浮 动 元 素 的 高 度 不 同 ， 那 么 当 它们 向 下 移动 时 可 能 被 其 他 浮动 元 素 “ 卡 住 ” </p> 

</div> 

</body> 

</html> 


运行 代码 后 效果 如 图 14-22 所 示 ， 注 意 观 察 编号 图 层 在 黄色 图 层 中 的 位 置 根据 浮动 属 
性 的 不 同 有 何 变 化 , 并 尝试 改变 浏览 器 大 小 , 观察 黄色 图 层 随 浏览 器 宽度 变化 而 自行 换行 ， 
体会 其 中 的 原因 。 
ae- 
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图 14-22 “float” 属 性 
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14.10.4 ”清除 属性 一 一 clear 


“clear” 属 性 规定 元 素 的 哪 一 侧 不 允许 其 他 浮动 元 素 。 在 CSS1 和 CSS2 中 ， 这 是 通 
过 自动 为 清除 元 素 〈 即 设置 了 “clear” 属 性 的 元 素 ) 增加 上 外 边 距 实现 的 。 在 CSS2.1 中 ， 
会 在 元 素 上 外 边 距 之 上 增加 清除 空间 ， 而 外 边 距 本 身 并 不 改变 。 不 论 哪 一 种 改变 ， 最 终结 
果 都 一 样 ， 如 果 声 明 为 左边 或 右边 清除 ， 会 使 元 素 的 上 外 边框 边界 刚好 在 该 边 上 浮动 元 素 
的 下 外 边 距 边界 之 下 。 比 如 ， 如 果 一 个 网 页 已 分 好 章节 ， 设 计 者 也 许 不 希望 浮动 元 素 从 一 
节 中 降 到 另 一 节 。 这 种 情况 下 ， 可 以 设置 每 节 的 第 一 个 元 素 ， 以 禁止 浮动 元 素 在 它 的 旁边 
出 现 。 如 果 它 被 放置 为 与 浮动 元 素 相 邻 ， 则 它 下 沉 至 低 于 浮动 元 素 为 止 ， 所 有 的 子 序列 内 
容 显示 在 它 后 面 。 其 语法 为 : 


clear:left | right | both | none 
实例 14-19: 使 用 清除 属性 “clear”， 比 较 浮动 与 静止 元 素 的 区 别 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html] xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 清 除 属性 clear</title> 
<style type="text/CSS"> 
== 
.imgfloat { 
float:right; 
} 
.nonefloat { 
clear:right; 
/* 右 侧 清除 浮动 */ 
} 
div { 
margin: Opx; 
width: 800px; 
border: lpx dotted #F60; 
} 
pt{ 
text-indent: 2pc; 
} 
一 -> 
</style> 


</head> 
<body> 


<div > 
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<img src="img/divbg.jpg" width="200" height="150" class="imgfloat"/> <p 


class="">clear 属性 规定 元 素 的 哪 一 侧 不 允许 其 他 浮动 元 素 。 在 CSS1 和 css2 中 ， 这 是 
通过 自动 为 清除 元 素 ( 即 设置 了 clear 属性 的 元 素 ) 增加 上 外 边 距 实 现 的 。 在 css2.1 中 , 会 
在 元 素 上 外 边 距 之 上 增加 清除 空间 ， 而 外 边 距 本 身 并 不 改变 。 不 论 哪 一 种 改变 ， 最 终结 果 都 一 
样 ， 如 果 声 明 为 左边 或 右边 清除 ， 会 使 元 素 的 上 外 边框 边界 刚好 在 该 边 上 浮动 元 素 的 下 外 边 距 
边界 之 下 。 比 如 : 如 果 一 个 网 页 已 分 好 章节 ， 设 计 者 也 许 不 希望 浮动 元 素 从 一 节 中 降 到 另 一 节 。 
这 种 情况 下 ， 可 以 设置 每 节 的 第 一 个 元 素 ， 以 禁止 浮动 元 素 在 它 的 旁边 出 现 。 如 果 它 被 放置 为 
与 浮动 元 素 相 邻 ， 则 它 下 沉 至 低 于 浮动 元 素 为 止 ， 所 有 的 子 序列 内 容 显示 在 它 后 面 。 </p> 


</div> 
<div > 


<img src="img/divbg.jpg" width="200" height="150" class="imgfloat"/> <p 


class="nonefloat">clear 属性 规定 元 素 的 哪 一 侧 不 允许 其 他 浮动 元 素 。 在 CSS1 和 
CSS2 中 ， 这 是 通过 自动 为 清除 元 素 〈 即 设置 了 clear 属性 的 元 素 ) 增加 上 外 边 距 实 现 的 。 在 
CSS2 .1 中 ， 会 在 元 素 上 外 边 距 之 上 增加 清除 空间 ， 而 外 边 距 本 身 并 不 改变 。 不 论 哪 一 种 改变 ， 
最 终结 果 都 一 样 ， 如 果 声 明 为 左边 或 右边 清除 ， 会 使 元 素 的 上 外 边框 边界 刚好 在 该 边 上 浮动 元 
素 的 下 外 边 距 边界 之 下 。 比 如 : 如 果 一 个 网 页 已 分 好 章节 ， 设 计 者 也 许 不 希望 浮动 元 素 从 一 节 
中 降 到 另 一 节 。 这 种 情况 下 ， 可 以 设置 每 节 的 第 一 个 元 素 ， 以 禁止 浮动 元 素 在 它 的 旁边 出 现 。 
如 果 它 被 放置 为 与 浮动 元 素 相 邻 ， 则 它 下 沉 至 低 于 浮动 元 素 为 止 ， 所 有 的 子 序列 内 容 显 示 在 它 
后 面 。 </p> 


</div> 
</body> 
</html> 


运行 代码 后 效果 如 图 14-23 所 示 ， 上 一 图 层 构 成 图 文 混 排 ， 下 一 图 层 设置 了 clear 属性 
后 ， 文 字 下 沉 至 低 于 浮动 元 素 之 下 。 
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图 14-23 清除 属性 “clear” 


14.10.5 ”可 视 区 域 一 clip 
对 于 元 素 ，CSS 有 一 种 剪 切 方法 ,包含 于 clip 矩形 之 内 的 内 容 显 示 , 之 外 的 部 分 则 不 
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显示 。 当 一 幅 图 像 的 尺寸 大 于 


使 用 CSS 格式 化 网 页 


含 它 的 元 素 时 ， 可 以 用 “clip” 


属性 规定 一 个 元 素 的 可 见 尺 


寸 ， 这 样 此 元 素 就 会 被 修剪 并 显示 为 这 个 形状 。 对 于 一 个 绝对 定义 元 素 ， 在 这 个 矩形 内 的 


内 容 才 可 见 。 出 了 这 个 剪裁 


元 素 的 内 容 区 大 ， 也 可 能 比 内 容 区 小 。 
允许 用 户 遮 羡 一 个 矩形 框 下 面 的 内 容 。 要 剪辑 一 个 元 素 ， 必 须 指定 position:absolute。 
然后 ， 指 定 它 的 top，right，bottom 和 left 的 值 。 其 语法 为 : 


.Clip {position: relative; height: 130px; width: 


区 域 的 内 容 会 根据 “overflow” 的 值 来 处 理 。 剪 裁 区 域 可 能 比 


200px; border:solidlpx#ccc; } 


.Clip img { position: absolute; clip:rect (30px 165px 100px 30px) ; } 


实例 14-20: 图 像 调整 和 剪辑 ， 将 原 图 像 按 比例 缩放 50% 并 从 中 截取 一 个 方 框 作为 缩 


略图 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.o0rg/TR/xhtml1/DTD/xhtml1l-strict.dtd"> 
<html] xmlns="http://www.w3.0org/1999/xhtml"> 


<head> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 可 视 区 域 clip</title> 


<style type="text/CSS"> 


< 
body{ 
background: #FFFFFF; 


color: #333333; 


font-family: Arial, Helvetica, sans-serif; 


font-size: 100%; 
line-height: 140%; 
text-align: center; 
padding: 0; 
margin: 0; 
} 
pt{ 
margin: 0; 
text-aglin: center; 
} 
address{ 
font-size: 75%; 
} 
body,html{ 
height: 100%; 
大 的 上 DELipodyf 
overflow: hidden; 


上 


“300 


HTMIL/CSS 网 页 设计 与 开发 一 站 式 学 习 难点 /案例 /练习 


#top{ 

min-height: 90%; 
overflow: auto; 

} 

* html #top{ 

height: 90%; 

. 

af 

text-decoration: none; 
; 

.textBottom { 

color: #333333; 
position: absolute; 
left: 3em; 

top: lem; 

font: 26px "Century Gothic",Arial, Helvetica, sans-serif; 
clip: rect(18px auto auto auto); 
} 

.textTop { 

color: #CC0000; 
position: absolute; 
left: 3em; 

top: lem; 

font: 26px "Century Gothic",Arial, Helvetica, sans-serif; 
clip: rect(0 auto 18px 0); 
} 

.container { 

width: 28em; 

height: 5em; 

margin: lem auto; 
position: relative; 
background: #F6F6F6; 

| 

.textTop:hover { 
color: #808080; 

| 

.textBottom:hover { 
color: #FF4646; 

j; 

一 -> 

</style> 

</head> 

<body> 

<div id="top"> 
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<div class="container"> <a href="#" class="textTop">welcome tomysite!</a> 
</div> 
<p> 文 字 的 上 半 部 分 </p> 


<div class="container"> <a href="#" class="textBottom">welcome to 


mysite!</a> </div> 
<p> 文 字 的 下 半 部 分 </p> 
<div class="container"> <a href="#" class="textTop">welcome tomysite!</a> 
<a href="#" class="textBottom">welcome to mysite!</a> </div> 
<p> 二 组 文字 重合 的 效果 </p> 
</div> 
</body> 
</html> 


运行 代码 后 效果 如 图 14-24 所 示 。 请 用 户 尝试 用 鼠标 放 在 合成 文字 的 上 、 下 部 分 ， 观 
察 变色 效果 ， 本 例 巧妙 利用 了 “clip” 属 性 ， 完 成 了 多 彩 字体 的 效果 。 
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二 组 文字 重合 的 效果 


这 或 本 计 呈 | 保护 模式 拓 月 三 。 本 100% ~ 


图 1424 用 “clip” 属 性 制作 多 彩 文字 效果 
请 用 户 自行 思考 ， 尝 试 使 用 本 属性 ， 做 出 QQ 头像 式 的 缩 略图 效果 。 
14.10.6 ”超出 范围 一 一 overflow 


如 果 元 素 内 容 大 于 元 素 的 范围 ， 就 会 涉及 内 容 溢出 和 裁 切 的 问题 。CSS 会 以 几 种 方式 
中 的 一 种 处 理 溢 出 内 容 ， 如 表 14-9 所 示 。 和 缺 省 值 “visible” 表 示 内 容 在 元 素 框 之 外 的 部 分 
为 可 见 ， 这 会 导致 内 容 溢 到 元 素 框 之 外 ,但 不 会 改变 框 的 形状 。 如果 属性 值 设 为 “scroll”， 
元 素 的 内 容 被 剪 切 而 不 可 见 ， 但 提供 一 个 深 动 条 ， 使 得 无 需 改变 元 素 自身 的 形状 来 获取 内 
容 。 如 果 “overflow” 设 为 “hidden”， 元 素 的 内 容 将 被 剪 切 。 如 果 值 为 “scrol”， 不 论 
是 否 需要 ， 用 户 代理 都 会 提供 一 种 滚动 机 制 。 因 此 ， 有 可 能 即使 元 素 框 中 可 以 放下 所 有 内 
容 也 会 出 现 滚动 条 。 
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表 14-9 CSS 溢出 的 处 理 方式 


值 描述 
Visible 默认 值 。 内 容 不 会 被 修剪 ， 会 呈现 在 元 素 框 之 外 
hidden 内 容 会 被 修 前 ， 并 且 其 余 内 容 是 不 可 见 的 
scroll | 内 容 会 被 修剪， 但 是 浏览 器 会 显示 滚动 条 以 便 查 看 其 余 的 内 容 
auto | 如 果 内 容 被 修剪 ， 则 浏览 器 会 显示 滚动 条 以 便 查 看 其 余 的 内 容 
inherit 规定 应 该 从 父 元 素 继承 overflow 属性 的 值 


实例 14-21: 用 多 个 图 层 分 别 设置 “overflow” 属 性 各 值 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html] xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title> 无 标题 文档 </title> 
<style type="text/css"> 
一 
div { 
float: left; 
height: 100px; 
width: 200px; 
border: lpx dashed #F90; 
margin: 2px; 


text-indent: 2pt; 


.overvisible{overflow:visible} 

.overhidden{ overflow:hidden} 

.Overscroll{overflow:scroll} 

.overauto{overflow:auto} 

一 -> 

</style> 

</head> 

<body> 

<div class="overauto"><strong>auto:</strong> 如 果 元 素 内 容 大 于 元 素 的 范围 ， 就 会 涉 
及 内 容 溢 出 和 裁 切 的 问题 。 如 果 值 为 auto， 则 会 根据 内 容 添加 相应 的 滚动 条 。</div> 

<div class="overscroll"><strong>scroll:</strong> 如 果 元 素 内 容 大 于 元 素 的 范围 ， 
就 会 涉及 内 容 溢 出 和 裁 切 的 问题 。 如 果 值 为 scro11， 不 论 是 否 需要 ， 用 户 代理 都 会 提供 一 种 
滚动 机 制 。 因 此 ， 有 可 能 即使 元 素 框 中 可 以 放下 所 有 内 容 也 会 出 现 滚动 条 。</div> 

<divclass="overscroll"><strong>scrol1:</strong> 如 果 值 为 scro11， 即 使 元 素 框 中 
可 以 放下 所 有 内 容 也 会 出 现 滚动 条 。</div> 

<div class="overhidden"><strong>hidden:</strong> 如 果 元 素 内 容 大 于 元 素 的 范围 ， 
就 会 涉及 内 容 溢 出 和 裁 切 的 问题 。CSS 会 以 几 种 方式 中 的 一 种 处 理 溢出 内 容 ， 如 果 Overflow 
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设 为 hidqden， 元 素 的 内 容 将 被 剪 切 。</div> 

<div><strong>visible</strong>: 如 果 元 素 内 容 大 于 元 素 的 范围 ， 就 会 涉及 内 容 溢出 和 裁 切 
的 问题 css 会 以 几 种 方式 中 的 一 种 处 理 溢出 内 容 , 缺 省 值 visible 表示 内 容 在 元 素 框 之 外 的 
部 分 为 可 见 。 这 会 导致 内 容 溢 到 元 素 框 之 外 ， 但 不 会 改变 框 的 形状 。。</qiv> 

</body> 

</html> 


运行 代码 后 效果 如 图 14-25 所 示 。 


区 容 croi 如 果 值 为 srol， 即 | 
I ， 就 会 涉及 到 内 容 中 和 下 
|| 人 如 果 值 为 


容 也 会 出 现 党 动 条 。 | 
中 : 果 值 为 xl， 不 论 是 否 .i 


全 二 如 全 届 订 


则 会 根据 内 容 添加 相 
滚动 条 。 


素 的 范围 ， 就 会 上 及 到 内 会 
浇 出 和 裁 切 的 问题 。 人 
以 几 种 方式 中 的 一 种 处 

出 内 容 ， .如果 Overiow ew : 


素 框 之 外 ， 但 不 会 改变 框 的 
形状 。。 


玩 成 潮 计算 机 | 保护 模式 禁用 给 成 100%6 ~ 


图 14-25 ”比较 “overflow” 属 性 值 


14.10.7 ”可见 属性 一 一 visibility 
“visibility” 属 性 规定 元 素 是 否 可 见 。 它 指定 是 否 显示 一 个 元 素 生成 的 元 素 框 ， 
味 着 元 素 仍 占据 其 本 来 的 空间 ,不 过 可 以 完全 不 可 见 。 属 性 值 如 表 14-10 所 示 。 值 “ we 
在 表 中 用 于 从 表格 布局 中 删除 列 或 行 。 
表 14-10 visibility 的 属性 值 
值 描述 


Visible 默认 值 。 元 素 是 可 见 的 


hidden 元 素 是 不 可 见 的 

当 在 表格 元 素 中 使 用 时 ， 此 值 可 删除 一 行 或 一 列 ， 但 是 它 不 会 影响 表格 的 布局 。 被 行 或 列 占 
据 的 空间 会 留 给 其 他 内 容 使 用 。 如 果 此 值 被 用 在 其 他 的 元 素 上 ， 会 呈现 为 "hidden" 

inherit 规定 应 该 从 父 元 素 继承 “visibility” 属 性 的 值 


collapse 


四 提示 : 即使 不 可 见 的 元 素 也 会 占据 页 面 上 的 空间 。 请 使 用 “display” 属性 来 创建 
不 占据 页 面 空 间 的 不 可 见 元 素 。 


Be 
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14.11 难点 解析 


通过 本 章 的 学 习 ， 初 步 了 解 了 如 何 使 用 样式 表 来 精确 定义 网 页 元 素 ， 现 在 你 一 定 忍 不 
住 想 要 试 试 ， 下 面 先 从 分 析 网 页 构成 入 手 ， 逐 步 尝试 利用 DIV+CSS 来 建立 一 个 属于 自己 


的 网 站 。 


我 们 网 页 一 般 都 有 几 个 内 容 块 ， 比 如 ， (1) 标志 和 站 点 名 称 ;， 〈2) 主页 面 内 容 ; 
(3) 站 点 导航 ; (4) 子 菜 单 ， (5) 搜索 框 ，(6) 功能 区 ; (7) 页 脚 。 
假如 采用 DIV 元 素 将 这 些 结构 定义 出 来 ， 代 码 表示 如 下 : 


<div 
<div 
<div 
<div 
<div 
<div 
<div 


每 一 个 内 容 块 可 以 包含 任意 的 HTML 元 素 


id="header"></div> 
id="content"></div> 
id="globalnav"></div> 
id="subnav"></div> 
id="search"></div> 
id="shop"></div> 
id="footer"></div> 


标题 、 段 落 、 图 片 、 表 格 、 列 表 ， 并 指 


定 不 同 的 颜色 、 字 体 、 边 框 、 背 景 及 对 齐 属性 等 。 
这 的 名 称 是 控制 某 一 内 容 块 的 手段 ,通过 给 这 个 内 容 块 套 上 DIV 标签 并 加 上 唯一 的 id， 


就 可 以 用 CSS 选择 器 来 精确 定义 每 一 个 页 面 元 素 的 外 观 显示 ， 包 括 标题 、 列 表 、 图 片 、 链 
接 或 者 段落 等 。 


例如 ， 为 #header 写 一 个 图 片 规则 ， 就 可 以 完全 不 同 于 #content 里 的 图 片 规则 ， 从 而 使 
得 内 容 更 加 灵活 多 变 ; 另外 ， 也 可 以 通过 不 同 规则 来 定义 不 同 内 容 块 里 的 链接 样式 ， 类 似 
这 样 ，#globalnav a:link 或 者 #subnav a:link 或 者 #content a:link; 也 可 以 定义 不 同 内 容 块 中 相 
同 元 素 的 样式 不 一 样 ， 例 如 ， 通 过 #content p 和 #footer p 分 别 定义 #content 和 #footer 中 op 的 


样式 。 


从 网 页 布局 的 角度 来 看 ， 本 着 一 切 皆 为 框 的 原则 ， 如 果 单 行 一 列 ， 可 以 用 以 下 语法 


表示 : 


body { margin: Opx; padding: Opx; text-align: center; } 


#content { margin-left:auto; margin-right:auto; width: 400px; } 


两 行 一 列 : 


body { margin: Opx; padding: Opx; text-align: center;} 


#content-top { margin-left:auto; margin-right:auto; width: 400px; } 


#content-end {margin-left:auto; margin-right:auto; width: 400px; } 


三 行 一 列 : 


.274。 
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body { margin: Opx; padding: Opx; text-align: center; } 

#content-top { margin-left:auto; margin-right:auto; width: 400px; } 
#content-mid { margin-left:auto; margin-right:auto; width: 400px; } 
#content-end { margin-left:auto; margin-right:auto; width: 400px; } 


上 述 语法 中 margin-left:auto; margin-right:auto; 是 让 内 容 居中 ,也 可 以 用 margin:0 auto; 
代替 ， 使 得 外 边 距 上 下 设置 为 0， 左右 设 为 自动 。 而 text-align:center; 是 为 了 适应 IE6 以 下 
版 本 的 浏览 器 而 加 的 ,下 6 以 下 对 margin:0 auto: 不 能 解析 为 居中 ， 所 以 用 这 种 方式 来 补救 ， 
后 续 设 计 具 体内 容 时 再 用 text-align:left; 还 原 就 可 以 了 。 


14.12 综合 实例 


实例 14-22: 利用 DIV+CSS 布局 ， 完 成 的 网 页 效果 如 图 14-26 所 示 


Css 设计 实例 
|” 
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Div+css 
于 网 页 布局 设计 


图 14-26 DIV+CSS 布局 网 页 


圈 设计 分 析 

首先 ， 需 要 根据 完成 图 来 规划 一 下 页 面 的 布局 ， 仔 细 分 析 图 14-26 发 现 ， 图 片 大 致 分 
为 以 下 几 个 部 分 : 

1， 顶 部 部 分 ， 其 中 又 包括 了 LOGO、MENU 和 搜索 栏 

2 导航 部 分 ， 其 中 包括 菜单 导航 和 图 片 导航 

3， 内容 部 分 又 可 分 为 侧 边栏 、 主 体内 容 ; 


i 
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4. 底部 ， 包 括 一 些 版 权 信 息 。 有 了 以 上 的 分 析 ， 就 可 以 很 容易 地 布局 了 ， 网 页 结构 
如 图 14-27 所 示 。 


< 程序 代码 


1. 总 体 布局 
主体 结构 样 表 如 下 所 示 : 


body { 
background:#f£4f4f4; 
font-family:Arial, Helvetica, sans-serif; 
font-size:100%; 
line-height:1.125em; 
color:#999; 

下 

#main, .container { 
width:971px; 
margin:0 auto; 
font-size:.75em; 


} 


#header { 
height:179px; 
overflow:hidden; 

: 


#pagel #content -col-1 {width:592px; margin-right:49px;} 
#pagel #content .col-2 { width:330px;} 
#footer { 

Padding:15px 0 45px 0; 

background:#ebebeb; 

border-top:1px solid #d8d8d8; 


"a 
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2. 导航 栏 设置 


#header .nav li { 
float:left; 
padding-right:1px; 


#header .nav li a { 
float:left; 
line-height:43px; 
font-size:14px; 
color:#000; 
text-decoration:none; 
padding:0 37px 0 36px; 
background:#e0e0e0; 

; 

#header .nav li a:hover, #header .nav li a.current { 
background:#c00; 
Color:#fff; 

} 

#header .nav li.first a { 


background:url (images/nav-first.gif) no-repeat 0 0 #e0e0e0; 


#header .nav li.first a:hover, #header .nav li.first a.current { 
background:url (images/nav-first-act.gif) no-repeat 0 0 #c00; 
|) 
#header .nav li.last a { 
background:url (images/nav-last.gif) no-repeat 100% 0 #e0e0e0; 
padding:0 38px 0 38px; 


#header .nav li.last a:hover, #header .nav li.last a.current { 
background:url (images/nav-last-act.gif) no-repeat 100% 0 #c00; 
} 


网 页 中 引用 代码 如 下 所 示 ， 利 用 class="current" 语 句 ， 就 可 以 灵活 指示 当前 页 面 ， 比 如 


当前 页 面 为 “字体 样式 ” 只 需 将 首页 中 的 class="curent" 语 句 移动 到 “字体 样式 ”中 ， 就 
[以 使 “字体 样式 ”背景 变 红 ， 而 “首页 ”背景 变 回 灰色 。 


<div class="row-2"> 


<A = 


<ul class="nav"> 
<1i class="first"><a href="#" class="current"> 首 页 </a></1i> 
<1i><a href="#"> 基 本 概念 </a></1i> 
<1i><a href="#"> 字 体 样式 </a></1i> 
<1i><a href="#"> 图 层 定位 </a></1i> 
<1i><a href="#"> 图 像 背景 </a></1i> 


是 证 和 二 
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<1i><a href="#"> 边 框 设 置 </a></1i> 

<li class="last"><a href="#">Contact info</a></1i> 
</ul> 

<!-— /.nav --> 


</div> 
3. 网 页 代码 (完整 网 页 请 见 example_14-22.html) 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtmll1/DTD/xhtmll-strict.dtd"> 

<html] xmlns="http://www.w3.0rg/1999/xhtml" xml:lang="en" lang="en"> 
<head> 

<title>css 设计 </title> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


<meta http-equiv="Content-Style-Type" content="text/css" /> 

<link href="style.css" rel="stylesheet" type="text/css" /> 

<link href="layout.css" rel="stylesheet" type="text/css" /> 

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script src="js/jqFancyTransitions.1.7.min.js" 
type="text/javascript"></script> 


<script src="js/tabs.js" typ 


="text/javascript"></script> 


<script type= 
$ (function(){ 
$('#slider') .jqFancyTransitions ({ 


text/javascript"> 


effect: 'curtain', // wave, zipper, curtain 
width: 970, // width of panel 
height: 306, // height of panel 
strips: 10, // number of strips 
delay: 5000, // delay between images in ms 
stripDelay: 50, // delay beetwen strips in ms 
position: "alternate'，// top, bottom, alternate, curtain 
direction: 'fountainAlternate', // left, right, alternate, 
random, fountain, fountainAlternate 
navigation: false, // prev and next navigation buttons 
links: false // show images as links 
1); 
} 
</script> 
< [i Tt TE > 
<lank href "Te styleo cs rol "stylesheoet” type—"tert/cas /> 
<![endif]--> 
</head> 
<body id="pagel"> 
<div id="main"> 


=== hoader => 


“I 
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<div id="header"> 
<div class="row-1"> 
<div class="1ogo"> 
<h1><a href="#">css 设计 实例 </a></h1> 
</div> 
<form action="" id="search-form"> 
<fieldset> 
<input type="text" class="text" value="search" 
onfocus="if (this.value=="'search') {this.value="'"'}" 
onblur="if (this.value=="'') {this.value='search'}"/> 
<input type="submit" class="submit" value=""/> 
</fieldset> 
</form> 
</div> 
<div class="row-2"> 
a 
<ul class="nav"> 
<1i class="first"><a href="#" class="current"> 首 页 </a></1i> 
<1i><a href="#"> 基 本 概念 </a></1i> 
<1i><a href="#"> 字 体 样式 </a></1i> 
<1i><a href="#"> 图 层 定 位 </a></1i> 
<1i><a href="#"> 图 像 背景 </a></1i> 
<1i><a href="#"> 边 框 设置 </a></1i> 
<li class="last"><a href="#">Contact info</a></1i> 
</Jul> 
xl== /ADAV ==> 
</div> 
</div> 
< == CONntent ==> 
<div id="content"> 
<!== .main-=box ==> 
<div class="main-box"> 
< dor 
<div id="slider"> 


<img src="images/slidel.jpg" alt="" /> 


images/slide2.jpg" alt="" /> 
<img src="images/slide3.jpg" alt="" /> 
</div> 
< = /Lidor ==2 
</div> 
< /mALn Dor ==> 
<div class="indent"> 
<div class="wrapper"> 


<div class="col-1"> 


bi 


HTMIL/CSS 网 页 设计 与 开发 一 站 式 学 习 一 一 难点 /案例 /练习 


<h3> 最 新 更 新 </h3> 
<ul class="news"> 
< 
<span class="date"><b>25</b>Mar</span> 
<h2><a href="#">Div+css<br /> 
网 页 布局 设计 </a></h2> 
<h4>gnbsp;</h4> 
<p> 在 网 页 制作 中 ， 有 许多 的 术语 ， 例 如 : CSS、HTML、DHTML、XHTML 等 。 在 
下 面 的 文章 中 会 用 到 一 些 有 关于 HTML 的 基本 知识 ， 而 在 学 习 这 篇 入 门 教程 之 前 ， 请 确定 你 已 
经 具有 了 一 定 的 HTML 基础 。 下 面 开始 一 步 一 步 使 用 DIV+CSS 进行 网 页 布局 设计 吧 。</p> 
<a href="#" class="txt1l"><strong>Read more</strong></a> 
</1i> 
</ul> 
</div> 


<div class="col-2"> 


<div class="section indent"> 
<h3 class="alt"><em>April 2010 <a href="#"><img src="images/ 
rss.jpg" alt="" /></a></em> 推 荐 教程 </h3> 
<dl class="issues"> 
<dt>ie6 png 透明 的 解决 方法 ， 大 网 站 都 在 用 </dt> 
<dd> 
<p><a href="#"> 今天 解决 png 图 片 在 IE6 下 的 背景 透明 问题 ， 找 到 了 一 
个 好 方法 。 之 前 的 解决 方案 会 造成 错位 ， 使 页 面 变形 。 现 把 这 个 方法 公布 如 下 ， 本 人 亲 测 可 以 
正常 使 用 </a></p> 
<em>by John Becks</em> 
</dd> 
<dt>HTML5 网 页 如 何 让 所 有 的 浏览 器 都 能 识别 HTML5 标签 样式 </dt> 
<dd class="last"> 
<p><ahref="#"> 如 今 HTML5 愈 来 愈 引发 大 家 的 关注 了 ， 但 目前 支持 HTML5 
的 浏览 器 还 不 是 主流 ， 特 别 是 国内 用 户 近 50$ 以 上 仍旧 使 用 IE6,，</a></p> 
<em>by Linda Grey</em></dd> 
</dl> 
</div> 


</div> 
</div> 
</div> 
</div> 


</div> 
== E00ter ==> 
<div id="footer"> 
<div class="container"> 
3 
er 


<ul class="nav”> 


<li><a href="#">home</a>|l</1i> 
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<li><a href="#">services</a>|</1i> 
<li><a href="#">products</a>|</1i> 
<li><a href="#">features</a>|l</1i> 
<li><a href="#">orders form</a>1</1i> 
<li><a href="#">our equipment</a>|</1i> 
<li><a href="#">contact info</a></1i> 
</ul> 
l= /na ==> 
<span>HJSG.COM</span> gnbsp;&copy; &nbsp;2013. gnbsp; &nbsp;<a href= 
"#">GXS</a> 
</div> 


</div><script type="text/javascript"> 


Var gaJsHost = (("https:" == document .location.protocol) ? "https://ssl.": 
"http://www."); 
document .write (unescape ("%3Cscript src='" + gaJsHost + "google-analytics. 


com/ga.js' type="'text/javascript"'%3E%3C/script%3E")); 
</script> 
<script type="text/javascript"> 
try { 
Var pageTracker = gat. getTracker ("UA-7078796-1"); 
pageTracker. trackPageview(); 
} catch (err) {}</script> 
</body> 
</html> 
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CSS 的 英文 全 称 是 什么 、 中 文 名 是 什么 ? 
在 CSS 中 没有 box 这 个 属性 ，CSS 中 的 box 属性 是 由 哪 六 个 基本 部 分 组 成 的 ? 
边框 的 样式 可 以 包含 的 值 包括 哪些 ? 
解释 盒子 模型 的 float 属性 如 何 应 用 ? 
CSS 布局 方法 与 表格 布局 方法 相 比 ， 有 哪些 优势 ? 
圆 角 框 主要 有 哪 几 种 制作 方法 
. 写 出 如 下 图 所 示 的 表单 效果 的 代码 
用 户 名 密码 
8.， 使 用 重 构 的 方式 制作 出 一 个 如 图 14-28 所 示 的 水 平 、 垂 直 都 居中 ， 短 边 为 S0px， 
长 边 为 150px 的 红色 十 字 架 。 要 求 : 
a. 使 用 2 个 div 完 成 
b. 使 用 3 个 div 完 成 
c. 使 用 5 个 div 完 成 


a 多 加 


~ 


be 
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图 14-28 操作 题 2 效 果 


9， 写 出 下 列 要 求 的 CSS 样式 表 。 

(1) 使 用 <td> 标 签 样式 ， 设 置 字体 颜色 : #2A1FFF; 字体 大 小 : 14px。 内 容 与 边框 之 
间 的 距离 : Spx。 

(2) 使 用 超 链 接 伪 类 : 不 带 下 划 线 ; 颜色 : #333333; 和 鼠标 悬 停 在 超 链接 上 方 时 ， 显 
示 下 划 线 ; 颜色 : 十 F5500。 
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滤 镜 〈Filter) 原 指 放 在 照相 机 镜头 前 用 来 改变 图 像 影 调 的 特殊 镜片 ， 被 图 像 处 理 软件 
借用 过 来 改变 图 形 的 外 观 ， 如 模糊 、 液 化 等 ， 以 增加 图 形 的 视觉 效果 。 随 着 数码 照片 的 兴 
起 , 广泛 被 人 们 所 熟悉 和 掌握 ， 通 过 本 章 的 学 习 之 后 ,会 发 现 ， 在 CSS 中 只 需 简 单 地 设置 
儿 段 代码 ， 就 能 实现 媲美 图 片 的 效果 。 本 章 将 带 大 家 一 起 来 领略 儿 种 视觉 滤 镜 效果 。 滤 镜 
分 为 视觉 滤 镜 和 转换 滤 镜 两 种 。 

D 视觉 滤 镜 : 视觉 滤 镜 只 可 以 达到 静态 的 特效 效果 。 只 需 在 网 页 内 使 用 CSS 的 定义 

语法 ， 即 可 将 此 区 域 和 层 滤 镜 效果 添加 到 网 页 内 。 

D 转换 滤 镜 : 转换 滤 镜 是 用 于 两 幅 画面 进行 转换 时 所 使 用 的 特效 ， 可 以 产生 动态 效 

果 。 除 了 在 网 页 中 利用 CSS 的 定义 语法 外 ， 还 必须 配合 “script” 语 言及 事件 的 概 
念 ， 才 能 更 好 地 使 用 转换 滤 镜 。 


本 章 要 点 : 

透明 效果 滤 镜 : alpha 

对 颜色 进行 透明 处 理 滤 镜 ，chroma 
设置 阴影 滤 镜 : dropshadow 

渐变 阴影 效果 滤 镜 : shadow 

对 象 的 水 平 翻转 滤 镜 ，fliph 

发 光 效 果 滤 镜 : glow 

动感 模糊 滤 镜 : blur 

有 遮 音效 果 滤 镜 : mask 

灰 度 处 理 滤 镜 : gray 


=| 


15.1 使 用 滤 镜 


视觉 滤 镜 的 基本 语法 为 : 
filter:filtername (parameters) 


也 就 是 说 ， 只 要 大 家 进行 滤 镜 操作 ， 就 必须 先 定义 “filter”。“filtermame ”是 滤 镜 属 
性 名 ， 这 里 包括 “alpha”、“blur”、“chroma” 等 多 种 属性 。 
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15.1.1 ”透明 效果 一 一 alpha 


“alpha” 滤 镜 可 以 产生 颜色 透明 及 渐变 的 效果 ， 可 以 设置 整体 透明 度 ， 或 线性 渐变 和 
放射 渐变 的 透明 ， 语 法 如 下 : 


filter:alpha (opacity=opacity,finishopacity=finishopacity, style=style, st 


artx=startx, starty=starty, finishx=finishx, finishy=finishy) 
主要 的 参数 解释 如 表 15-1 所 示 : 


表 15-1 alpha 的 属性 值 


值 说 了 明 
| 代表 透明 度 水 准 。 默 认 的 范围 是 0~100， 其 实 是 百分比 的 形式 .0 代表 完全 透明 ， 
py 100 代表 完全 不 透明 
finishopacity | 可 选 参数 ， 如 果 设置 渐变 的 透明 效果 时 ， 用 来 指定 结束 时 的 透明 度 。 范 围 是 0-100 
指定 透明 区 域 的 形状 特征 。 其 中 0 代表 统一 形状 、1 代表 线性 、2 代表 放射 状 、3 代 
oe 表 长 方形 
i 代表 渐变 透明 效果 开始 x 坐标 
star 代表 渐变 透明 效果 开始 y 坐标 
人 代表 渐变 透明 效果 结束 x 坐标 
finishy 代表 渐变 透明 效果 结束 » 坐标 


实例 15-1: 添加 “alpha” 滤 镜 效 果 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 透 明 效 果 : alpha</title> 

<style type="text/css"> 


es 
img { 
width: 220px; 
margin: 2px; 
border: lpx dashed #000; 
float: left; 
} 
div { 


font-size: 14px; 

color: #000; 
background-color: #FFF; 
padding: 2px; 
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width: 220px; 
margin-top: -10px7 
margin-right: 2px; 
margin-bottom: 2px; 
margin-left: 2px; 
height: 40px; 

} 

一 -> 

</style> 

</head> 

<body> 


CSS 滤 镜 


<div> 原 图 <img src="img/img.jpg" /></div> 


<div><img src="img/img.jpg" 


style="filter:alpha (opacity=0, finishopacity=100, style=1, startx=0, starty 
=85, finishx=150, finishy=85)"/></div> 


<img src="img/img.jpg" 


style="filter:alpha (opacity=0, finishopacity=100, style=2, startx=0, starty 


=85, finishx=150, finishy=85)"/> 
<img src="img/img.jpg" 


style="filter:alpha (opacity=0, finishopacity=100, style=3, startx=0, starty 


=85, finishx=150, finishy=85)"/> 
</body> 
</html> 


运行 代码 后 效果 如 图 15-1 所 示 ， 上 方 是 原 图 ， 下 方 是 三 种 “alpha” 模 式 。 


tm : alpha - Windcws Internet Explorer 


局 ] 百 | ® 


CAI 
会 收 让 。 大 过 明光 音 :alpha 


CNUserswdminatratoADeaktopycs 孝 村 ,二 站 -| 分 | X 上 月 Scorch Aero 


| 


天 计 丰 儿 | 人 jp 本 下 


图 15-1 


“alpha” 滤 镜 效 果 


15.1.2 ”对 颜色 进行 透明 处 理 一 一 chroma 


“chroma” 滤 镜 将 对 象 中 指定 的 颜色 显示 为 透明 。 不 建议 在 8 位 到 24 位 抖动 的 图 片 
文件 上 使 用 此 滤 镜 。 例 如 ， 保 存 会 抖动 和 压缩 的 JPEG 格式 图 片 文件 时 ， 应 用 此 滤 镜 ， 其 


es 
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效果 会 不 太美 观 ， 另 外 ， 此 效果 在 羽化 的 线条 等 处 也 不 会 很 好 地 发 挥 作 用 。 
实例 15-2: 利用 “chroma” 属 性 制作 自 订 背景 的 文字 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.o0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>chroma 属性 </title> 

</head> 

<body> 

<div style="background-image:url (img/bgl.jpg); width:300px"> 

<div style="filter:chroma (color=#CCCCCC) ;color:#CCCCCC;background-color: 
#FFFFFF; width: 300px; font: bold 55pt 宋体 "> 斜纹 背景 </ div> 

</div > 

<div style="background-image:url (img/bg2.jpg); width:300px"> 

<div style="filter:chroma (color=#CCCCCC) ;color:#CCCCCC; background- color: 
#FFFFFF; width: 300px; font: bolqd 55pt 宋体 "> 方 格 背 景 </ div> 

</div > 

</body> 

</html> 


运行 代码 后 效果 如 图 15-2 所 示 。 


chroma 履 性 - Windows Intemet Explorer 


"I 


潮 计算 机 | 保护 模式 : 磊 用 住 ” 成 100%6 


图 15-2 自 订 背景 的 文字 


15.1.3 ”设置 阴影 一 一 dropshadow 
“dropshadow” 滤 镜 可 以 设置 对 象 的 阴影 效果 ， 其 语法 如 下 : 


filter:dropshadow (color=scolor, offx=ioffsetx,offy=ioffsety, positive= 


bpositive) 
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各 参数 使 用 情况 如 15-2 所 示 。 


表 15-2 dropshadow 的 属性 值 


值 说 明 
color 
offx 阴影 相对 于 原始 对 象 的 水 平 位 置 
ofy 阴影 相对 于 原始 对 象 的 垂直 位 置 
positive 设置 阴影 的 透明 ，0 为 透明 ，1 为 不 透明 


实例 15-3: 对 图 片 和 文字 使 用 “dropshadow” 滤 镜 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtm11-transitional.dtd"> 

<htm1l xmlns="http://www.w3.org/1999/xhtm1"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>dropshadow 属性 </title> 

<style type="text/css"> 


.img 
filter:dropshadow (color=#CCCCCC, offx=5, offy=5,positive=1); 

/* 声 明 使 用 dropshadow 渡 镜 ， 阴 影 颜 色 为 黑色 ， 相 对 于 原始 对 象 的 x 轴 位 置 为 5，y 轴 位 置 为 5*/ 
} 


div 
float: left; 
height: 400px; 
width: 410px; 
margin-left: 5px; 

} 

-—> 

</style> 

</head> 

<body> 


<div class="img"> 

<p style="font-size:28px; font-family:Arial, Helvetica, sans-serif; color: 
#F60"> 用 dropshadow 滤 镜 <br /> 

<img src="img/img.jpg" width="400" height="300" /> 

</div> 

<div> 

<p style="font-size:28px; font-family:Arial, Helvetica, sans-serif"> 不 用 
dropshadow 滤 镜 <br /> 

<img src="img/img.jpg" width="400" height="300" /> 

</div> 
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</body> 
</html> 


运行 代码 后 效果 如 图 15-3 所 示 。“dropshadow” 滤 镜 对 图 片 同样 适用 。 


(Bdiopshadom 必 -Window intemet Epiorer LE 


OO" | eVaninisretor postop css ERT eomple 15 3 ~ | 5 X| 
会 Wa |drepshedov 和 人 


用 dropshnadow 滤 镜 不 用 dropshadow 滤 镜 


图 15-3 “dropshadow” 滤 镜 


名 经 测试 ， 滤 镜 中 出 现 颜色 参数 时 ， 对 “color:#F60"” 这 种 表现 形式 支持 不 好 ， 会 
默认 为 黑色 。 


15.1.4 渐变 阴影 效果 一 一 shadow 


“shadow ” 滤 镜 为 对 象 内 容 建立 阴影 效果 。 它 除了 具备 和 opshadow ” 滤 


还 具有 渐变 阴影 的 效果 。 语 法 如 下 : 


的 效果 外 ， 


filter: shadow (color=scolor,direction=ioffset, strength=idistance) 


其 主要 参数 的 说 明 如 15-3 所 示 。 


表 15-3 shadow 的 属性 值 


值 说 阴 
color 设 定 渐变 阴影 的 颜色 
direction 设 定 阴影 的 方向 ， 其 取 值 范 围 为 0~315， 步 长 为 45° 
strength 设 定 以 对 象 为 基准 的 在 运动 方向 上 的 向 外 扩散 距离 


实例 15-4: 比较 “shadow” 和 “dropshadow” 滤 镜 的 区 别 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.o0rg/TR/html4/loose.dtd"> 
<html> 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
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<title> 对 比 shadow 和 dropshadow</title> 
<style type="text/css"> 
.shadow { 
position: absolute; 
filter: shadow(color =#FF9900, direction = 45); 
width: 600px; 
} 
.dropshadow { 
position: absolute; 
filter: dropshadow (color =#0F0900, offx = 10, offy = 10, positive = 1); 
width: 600px; 
lefts 11pr? 
top: 106px; 
. 
</style> 
</head> 
<body> 
<pclass="shadow" style="font-size: 40pt; font-weight: bold; color: red;"> 
CSS 滤 镜 一 一 shadow</p> 
<br> 
<br> 
<br> 
<p class="dropshadow" style="font-size: 40pt; font-weight: bold; color: 
red; ">CSS 滤 镜 一 一 dropshadow 
</p> 
</body> 
</html> 


运行 代码 后 效果 如 图 15-4 所 示 。 从 图 中 可 以 看 出 ， “shadow” 滤 镜 中 的 阴影 有 渐变 效 
果 ， 较 为 真实 ， 而 “dropshadow” 中 的 阴影 和 文字 脱离 开 来 ， 实 质 是 本 体 文字 的 复制 阴影 ， 
效果 一 般 。 


| Pa 人 ET 避 


GOOF re “| [YD ch rere D7| 


| 帝 % 大 关 。 悦 对 tshadow 和 dropshadow 


Css 滤 镜 一 shadow | 


| 王 本 计 基 人 | 保 六 楼 式 要 后 给- 人 Rl00% ~ 


图 15-4 比较 “shadow” 和 “dropshadow” 滤 镜 的 区 别 
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15.1.5 ”对 象 的 水 平 翻 转 一 一 人 liph 


“fliph” 滤 镜 设置 对 象 的 水 平 翻转 ，“flipv” 滤 镜 设 置 对 象 的 垂直 翻转 ， 这 两 个 滤 镜 
实例 15-5: 使 用 翻转 滤 镜 翻转 图 片 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 


"http://www.w3.o0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 


<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 翻 转 属性 </title> 

<style type="text/css"> 

上 

div { 


float: left; 
height: 300px; 
width: 400px; 
margin: Opx; 
} 
div#heng{ 
filter:f1lipH;/* 声 明 使 用 水 平 翻转 滤 镜 */ 
} 
div#chuif{ 
filter:flipV;/* 声 明 使 用 垂直 翻转 滤 镜 */ 
clear: right; 
} 
div#chhen{ 
filter:flipH flipV; 
/*x 声 明 先 使 用 水 平 翻转 再 垂直 翻转 滤 镜 */ 
} 
三 > 
</style> 
</head> 
<body> 
<div> 
<p> 原 图 </p><img src="img/divbg.jpg" width="400" height="300" /> 
</div> 
<div id="heng"> 
<p> 水 平 翻转 图 </p><img src="img/divbg.jpg" width="400" height="300" /> 
</div> 
<div id="chui"> 
<p> 垂 直 翻 转 图 </p><img src="img/divbg.jpg" width="400" height="300" /> 
</div> 
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<div id="chhen"> 
<p> 先 使 用 水 平 翻 转 再 垂直 翻转 图 </p><img src="img/divbg.jpg" width="400" height= 
"300™" /> 
</div> 
</body> 
</html> 


运行 代码 后 效果 如 图 15-5 所 示 。 可 以 看 出 翻转 滤 镜 对 <div> 也 同样 适用 ， 图 层 翻转 时 ， 
图 层 中 文字 也 同样 翻转 。 


BE or ee 


(OO “|e weaminseonpedtop eT Terompie 15 5 


| 


图 闪 短 束 李 电 夫 限 直 冰 册 习 3 
和 10% 


15.1.6 ”发 光 效果 一 一 glow 


“glow” 滤 镜 环 绕 对 象 内 容 边缘 添加 辉 光 ， 用 来 制作 光景 效果 。 瘤 光 将 出 现在 对 象 边 
界 内容 的 最 外 轮廓 之 外 。 其 语法 如 下 : 


filter: glow (color=scolor, strength=idistance) 


其 主要 参数 的 说 明 如 表 15-4 所 示 。 


表 15-4 glow 的 属性 值 
说 明 
设 定 边 缘 光 学 的 颜色 
设 定 边 缘 光 晕 的 强度 大 小 ， 取 值 为 1 一 255 


实例 15-6: 将 图 片 和 文字 加 上 辉 光 效果 
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.o0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.o0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>glow 滤 镜 </title> 

<style type="text/css"> 

<!-—-— 

.img{ 

filter: glow (color=yellow,strength=5); 

/* 声 明 使 用 glow 滤 镜 ， 光 曼 颜 色 为 黄色 ， 强 度 为 5*/ 

} 

一 -> 

</style> 

</head> 

<body> 

<div class="img"> 

<p style="font-size:28px; font-family:Arial, Helvetica, sans-serif; color: 
#F60"> 用 glow 滤 镜 <br /> 

<img src="img/img.jpg" width="400" height="300" /> 

</div> 

</body> 

</html> 


运行 代码 后 效果 如 图 15-16 所 示 。 


3 谭 汪 | Ey 入 区 和 用 和 loo% 


图 15-6 “glow” 


15.1.7 ”动感 模糊 一 一 blur 


“blur” 滤 镜 制 作对 象 内 容 的 模糊 效果 ， 属 性 如 表 15-5 所 示 : 
具体 语法 如 下 : 


filter:blur (add=add, direction=direction, strength=strength) 
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表 15-5 blur 的 属性 值 


值 说 明 


add 是 一 个 布尔 判断 “TRUE (默认 ) ”或 者 “FALSE”， 它 指定 是 否 显示 blur 滤 镜 效果 
用 来 设置 模糊 的 方向 。 其 中 0” 代表 垂直 向 上 ， 然 后 按照 顺 时 针 方 向 每 43” 为 一 个 单位 ， 
rectlon 
它 的 默认 值 是 向 左 的 270* 


strength | 只 能 使 用 整数 来 指定 ， 它 代表 有 多 少 像素 的 宽度 将 受到 模糊 影响 ， 默 认 值 是 5 


实例 15-7: 使 用 “blur” 滤 镜 给 图 片 加 上 动感 模糊 效果 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html] xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 动 感 模糊 blur</title> 

<style type="text/css"> 


width: 250px; 


float: left; 
width: 250px; 
margin-left: 5px; 
} 
4 | 
width: 250px; 
font-size: 14px; 
color: #FFF; 
background-color: #000; 
margin-left: Opx; 
} 
——> 
</style> 
</head> 
<body> 
<div><img src="img/img.jpg"” /><div class="txt"> 原 图 </div></div> 
<div><img style="filter:blur(strength=10)"src="img/img.jpg" /><div 
class="txt">strength=10</div></div> 
<div><img style="filter:blur(strength=70)"src="img/img.jpg" /><div 
class="txt">strength=70</div></div> 
<div><img style="filter:blurl(add=1,direction=90,strength=10)" src= 
"img/img.jpg" /><div class="txt">add=1,direction=90,strength=10 
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</div></div> 
<div><img style="filter:blurl(add=true,direction=0,strength=10)" src= 
"img/img.jpg" /><div class="txt">add=true,direction=0,strength=10 
</div></div> 
<div><img 
style="filter:blur (add=true, direction=135, strength=10) "src="img/img .jpg 
"” /><div class="txt">add=true,direction=135, strength=10</div></div> 
</body> 
</html> 


EU ls 中 


图 15-7 “blur” 滤 镜 效 果 


15.1.8 ” 遮 罩 效果 一 一 mask 


“mask” 滤 镜 将 对 象 内 容 的 透明 像素 用 “color” 参 数 指定 的 颜色 显示 作为 一 个 遮 童 ， 
而 不 是 透明 像素 则 转 为 透明 。 庶 四 的 概念 在 Photoshop 和 Flash 中 使 用 较 多 ， 有 具体 来 说 ， 就 
是 把 前 景 的 内 容 部 分 挖 空 ， 把 后 面 图 层 中 的 内 容 显 现 出 来 ， 其 语法 如 下 : 


filter:mask (color=color) 


该 滤 镜 只 有 一 个 参数 “color”， 即 遮 日 的 颜色 ， 其 实 对 于 遮 日 滤 镜 来 说 ， 前 景 颜色 并 
不 重要 ， 因 为 它 是 透明 的 ， 露 出 的 是 背景 画面 。 
实例 15-8: 用 “mask” 滤 镜 制 作 五 彩 文字 效果 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.o0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 遮 音效 果 mask</title> 

<style type="text/css"> 
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-bgf{ 
background-image: url (img/caihong.jpg); 
background-position: Opx 300px; 
} 
-maskl 
filter: mask (color=#FFFFFF); /* 声 明 使 用 mask 滤 镜 ， 遮 单 颜 色 为 白色 */ 
font-family: "黑体 "，" 楷 体 "; 
font-size: 60px; 
color: #fff; 
} 
-mask2 
filter: mask (color=#0066CC); /* 声 明 使 用 mask 滤 镜 ， 遮 单 颜色 为 白色 */ 
font-family: "黑体 "，" 楷 体 "; 
font-size: 60px; 
color: #fff; 


’ 

二 三 学 

</style> 

</head> 

<body> 

<divclass="bg" style="width:500px"><divclass="mask1"> 五 彩 缤纷 文字 </div></div> 
<divclass="bg" style="width:500px"><div class="mask2"> 五 彩 缤纷 文字 </div></div> 
</body> 

</html> 


运行 代码 后 效果 如 图 15-8 所 示 ， 使 用 “mask” 滤 镜 后 ， 原 本 文字 部 分 透明 ， 显 示 出 
背景 ， 其 余部 分 显示 滤 镜 中 指定 的 遮 单 颜色。 


Ee CUsers pdministaton\ Des top\es -| |X | 
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| 五 大 丰 文 于 


下 方 
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图 15-8 遮 音 效果 


15.1.9 灰 度 处 理 一 一 gray 
“gray” 滤 镜 将 对 象 中 的 颜色 除去 ， 并 变 成 黑白 效果 ， 这 个 滤 镜 没有 参数 。 当 需要 将 
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网 页 中 图 片 全 部 变 成 黑白 色调 时 ， 只 需 用 以 下 样 表 就 可 以 实现 : 


<style type="text/css"> 
< 

.img{ 

filter:gray; 

/* 声 明 使 用 灰 度 滤 镜 */ 

} 

一 -> 

</style> 


15.1.10 ”其 他 滤 镜 


1，xray 滤 镜 


让 对 象 反映 出 它 的 轮廓 并 把 这 些 轮廓 加 亮 ， 类 似 于 所 谓 的 “X” 光 片 ， 这 个 滤 镜 没有 
任何 参数 。 


2，Invert 滤 镜 


将 颜色 的 饱和 度 及 亮度 值 完 全 反 转 ， 使 用 “invert” 滤 镜 可 以 反 相 显示 对 象 内 容 ， 这 个 
滤 镜 同样 没有 参数 。 
实例 15-9: 对 一 张 图 片 分 别 使 用 “gray”、“xray” 和 “invert” 滤 镜 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html] xmlns="http://www.w3.0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>gray、xray 和 invert 滤 镜 </title> 

<style type="text/css"> 


= 

div { 
height: 200px; 
width: 340px; 
overflow: hidden; 
position: absolute; 

} 

body { 
margin: Opx; 

} 

一 -> 

</style> 

</head> 
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<body> 

<div> 原 图 <img src="img/img.jpg" width="800" height="600" /></div> 

<div style="left:345px">filter:gray 一 一 灰 度 效果 <img style="filter:gray;" 
src="img/img .jpg" width="800" height="600" /></div> 

<div style="left:0px; top:205px">filter:Xray 一 一 x 光 效 果 <img style= 
"filter:Xray;" src="img/img.jpg" width="800" height="600" /></div> 

<div style="left:345px; top:205px">filter:Invert 一 一 底片 效果 <img style= 
"filter:Invert;" src="img/img.jpg" width="800" height="600" /></div> 

</body> 

</html> 


运行 代码 后 效果 如 图 15-9 所 示 。 


CEC EPE SF 


图 15-9 滤 镜 效果 对 比 


3. wave 滤 镜 
可 为 对 象 内 容 建 立波 纹 扭曲 效果 ， 主 要 的 参数 说 明 如 表 15-6 所 示 。 其 语法 如 下 : 


"filter:wave (add=true, freq= ifreq, lightstrength= iPercentage, phase= 


iPercentage, strength= iDistance) 


表 15-6 ”wave 滤 镜 的 主要 参数 


值 说 明 
add 表示 是 否 要 把 对 象 按照 波形 样式 打 乱 


fred 波纹 的 频率 ， 也 就 是 指定 在 对 象 上 一 共 需 要 产生 多 少 个 完整 的 波纹 


lightstrength 可 以 对 于 波纹 增强 光影 的 效果 ， 范 围 0 一 100 


phase 用 来 设置 正弦 波 的 偏 移 量 


strength 代表 振幅 大 小 


实例 15-10: 对 文字 和 图 片 使 用 “wave” 滤 镜 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.o0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
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<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>wave 滤 镜 </title> 
<style type="text/css"> 
<!-— 
.txtwave { 
filter:wave (add=true, freq=10,1lightstrength=30,phase=0, strength=3); 
.imgwave { 
filter:wave (add=true, freq=20, lightstrength=100,phase=25, strength=15 
); 
div { 
font-size: 60px; 
Color:#F00; 
height: 400px; 
width: 500px; 
float: left; 
} 
Rn 
</style> 
</head> 


<body> 

<img class="imgwave" src="img/img.jpg" width="320" height="240" /> 
<div class="txtwave"> 拌 动 的 文字 与 图 片 </div> 

</body> 

</html> 


运行 代码 后 效果 如 图 15-10 所 示 。 
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拌 动 的 文字 与 图 片 


图 15-10 “wave” 滤 镜 效果 
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目镜 时 ， 一 般 把 “lightstrength” 的 值 设置 为 “0” ， 否 则 
文字 的 颜色 将 发 生变 化 ， 影 响 效 果 ; “strength” 的 值 在 “5” 左 右 ， 否 则 文字 容 
易 看 不 清楚 ; 文字 的 字号 也 要 稍 大 一 些 ， 效 果 才 明显 。 


15.2 应 用 多 个 滤 镜 


CSS 样式 表 允 许 设 定 多 个 滤 镜 ， 经 过 第 一 节 的 学 习 ， 我 们 知道 单一 滤 镜 也 能 设 定 多 个 
参数 ， 设 定时 ， 参 数 之 间 是 以 逗号 “,” 分 隔 ， 滤 镜 “filter” 和 其 他 CSS 样式 之 间 是 以 分 号 
“:” 分 隔 ， 当 同时 使 用 多 个 滤 镜 效果 时 ， 前 后 滤 镜 名 称 之 间 要 空 一 格 ， 如 实例 15-5 中 : 


div#chhen{ 
filter:fliph flipv; 
/x 声 明 先 使 用 水 平 翻转 再 垂直 翻转 滤 镜 */ 
} 


加 当 使 用 视觉 活 镜 时 ， 可 同时 调用 多 个 湛 镜 ， 当 调用 数 个 小 镜 时 ， 渡 镜 效果 的 调用 
顺序 ， 即 为 滤 镜 的 指定 顺序 ; 而 调用 后 面 的 滤 镜 时 ， 将 以 前 一 个 滤 镜 调用 后 所 产 
生 的 结果 为 依据 。 


实例 15-11: 利用 CSS 滤 镜 给 图 片 加 上 倒影 效果 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html] xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 水 波 倒影 </title> 

<style type="text/css"> 

< 

.daoying { 
filter:flipV wave (add=true, freq=5,1ightstrength=0, phase=8, strength=2) 
alpha (opacity=100, finishopacity=0, style=]1, startx=0, starty=20, finishx 
=0, finishy=350); 

1 

一 -> 

</style> 

</head> 

<body> 

<div><img src="img/shui.jpg" width="646" height="212" /></div> 

<div class="daoying"><img src="img/shui.jpg" width="646" height="212" /> 
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</div> 
</body> 
</html> 


运行 代码 后 效果 如 图 15-11 所 示 。 


区 TI 而 ”lo0% ， | 


图 15-11 巧 用 滤 镜 给 图 片 加 上 倒影 效果 


15.3 难点 解析 


章 介 绍 了 CSS 视觉 滤 镜 的 基本 使 用 方法 , 通过 相关 参数 设 定 ， 可 以 制作 成 与 图 片 相 
媲美 的 效果 ， 最 大 优点 在 于 能 批量 运用 到 网 页 元 素 中 ， 例 如 ， 给 相册 页 面 的 图 片 赋予 倒影 
效果 ， 任 何 图 片 不 经 PS 处 理 ， 就 能 快捷 高 效 地 得 到 倒影 效果 ， 尤 其 在 动态 网 页 中 ， 即 使 
是 客户 端 上 传 的 图 片 ， 依 然 能 够 瞬间 变 为 设计 者 的 设 定 效果 ; 假如 给 <img> 标 签 加 上 gray 
滤 镜 ， 所 有 图 片 都 会 变 为 黑白 (背景 图 片 除外 )〉。 

CSS 滤 镜 参数 相对 比较 简单 ， 但 如 何 应 用 到 网 页 中 有 效 地 发 挥 作用 ， 却 是 不 那么 容易 
的 事情 ， 下 面 将 一 个 CSS 滤 镜 和 Javascript 结合 起 来 ， 实 现 动 态 的 效果 的 例子 。 
实例 15-12: 图 片上 滚动 发 光 效 果 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0rg/TR/xhtmll1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www-w3-org/1999/xhtm1"> 

<head> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
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<title>jstcss 滤 镜 </title> 
<SCRIPT LANGUAGE="JavaScript"> 
i=0; 

function f wave() 

{i=i-47 
ShowCool.style.filter="Wave (Freq=1,LightStrength=80,Phase=" + i + ") 
setTimeout ("f wave()",100); 

E 

window.onload=f wave; 
</SCRIPT> 

<style type="text/css"> 


:= 三 
img { 
height: 300px; 
width: 300px; 
border: lpx solid #999; 
overflow: hidden; 
margin: Spx; 
} 
E> 
</style> 
</head> 
<body> 
<img src="img/caihong.jpg" id=showcool > 
</body> 
</html> 


运行 代码 后 效果 如 图 15-12 所 示 ， 图 片上 会 一 直 有 光影 滚动 ， 效 果 绚 丽 。 


js+cs5 滤 错 - Windows Intemet Explorer [SS ST 
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图 15-12 ”图 片上 光影 滚动 效果 
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15.4 综合 实例 


实例 15-13: 用 CSS 实现 鼠标 滑 过 渐变 效果 的 菜单 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.o0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 鼠 标 滑 过 渐变 效果 </title> 

<style> 

body,ul,h2,p{ margin:0; padding:0;} 

li{list-style:none;} 

a{text-decoration:none;} 

#box{width:562px;padding:10px 24px 20px;background:#EACFCF;overflow: 
hidden;margin:20px auto 0;} 

.left{width:266px;float:left;} 

.right{width:266px;float:right;} 

#box h2{height:38px;border-bottom:1lpx solid #D2A1Al;background:url( 
img/H2_Bg.png) no-repeat 0 10px;padding-left:20px;} 

#box h2 strong{float:left; line-height:38px;color:#885050; font-weight: 
normal;} 

#box h2 a{float:right;width: 52px;height:14px;background:url (img/a bg.png) 
no-repeat;font-size:12px;text-indent:10px;color:#fff;line-height:12p 
x;font-weight:normal;margin-top:10px;} 

#box li{height:30px;position:relative;border-bottom:lpx dashed #D1RA1RA17} 

#box 1i div, #box 1i p{height:30px;position:absolute;top:0;left:0;width:100%;} 

#box 1i p{background:#fff;opacity:0;filter:alpha (opacity=0);} 

#box li diva,#box1idivspan{line-height:30px;font-size:12px;height:30px;} 

#box li diva {float:left;background:url (img/li bg.gif) 8px 12px no-repeat; 
padding-left:20px;color:#7F5454;width:172px;overflow:hidden;} 

#box 1i div span{padding-right:10px;float:right;color:#CF9494;} 

</style> 

<script type="text/javascript"> 

window.onload=function() 

{ 

Var oBox=document .getElementById ("box"); 
Var aLi=document .getElementsByTagName ('1i"'); 
var i=0; 
for (i=0;i<aLi.length;i++) 
| 
Var oP=aLi[i] .getElementsByTagName ('p') [0]; 
oP.iAlpha=0; 
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oP.time=null; 

aLi [i] .onmouseover=function() 

{ 
Var oP=this.getElementsByTagName ('p') [0]; 
oP.time?clearInterval (oP.time):""; 
oP.style.opacity=1; 
oP.style.filter="alpha (opacity=100)"; 
oP.iAlpha=100; 

1 

aLi [i] .onmouseout=function ()1{ 
starmove (this.getElementsByTagName ('p') [0]); 


0 
function starmove (obj) 
{ 
obj .time?clearInterval (obj .time):""; 
obj .time=setInterval (function() {domove (obj);},14); 
} 
function domove (obj) 
{ 
var iSpeed=5; 
if (obj.iAlpha<=iSpeed) 
{ 
clearInterval (obj .time); 
obj .iAlpha=0; 
obj .time=null; 
} 
else 
{ 
obj .iAlpha-=iSpeed; 
} 
obj.style.opacity=obj .iAlpha/100; 
obj.style.filter="alpha (opacity="+obj.iAlphat+")"; 
1 
</acript> 
</head> 
<body> 
<div id="box"> 
<div class="left"> 
<h2><strong> 最 新 消息 </strong><a href="#">more</a></h2> 
<ul> 
<1i> 
<p></p> 
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<div> 
<a target=" blank" href="# "> 课程 常见 问题 合集 </a> 
<span>2011-03-29</span> 
</div> 
</1i> 
SIL> 
<p></p> 
<div> 
<a target=" blank" href="#"> 妙 味 课堂 JS 课程 结 课 标准 </a> 
<span>2011-03-27</span> 
</div> 
LL 
<1i> 
<p></p> 
<div> 
<a target=" blank"” href="#"> 网 页 特效 大 集合 (每 天 更 新 ) </a> 
<span>2011-03-22</span> 
</div> 
</1i> 
< 
<p></p> 
<div> 
<a target=" blank"” href="#"> 妙 味 课堂 上 课 地 点 </a> 
<span>2011-03-19</span> 
</div> 
</1i> 
<1i> 
<p></p> 
<div> 
<a target=" blank"” href="#">CSS 课程 最 新 开 班 时 间 </a> 
<span>2011-03-19</span> 
</div> 
< 
<Li> 
<p></p> 
<div> 
<a target=" blank" href="#">JavaScript 课程 最 新 开 班 时 间 </a> 
<span>2011-03-19</span> 
</div> 
</1i> 
<1i> 
<p></p> 
<div> 
<a target=" blank" href="# "> 妙 味 推出 零 基 础 网 页 制作 课程 </a> 
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<span>2011-03-19</span> 
</div> 
</1i> 
</ul> 
</div> 
<div class="right"> 
<h2><strong> 茶 馆 新 鲜 事 </strong><a href= 
"http://bbs.miaov.com">more</a></h2> 
<ul> 
<13> 
<p></p> 
<div> 
<ahref="#"target=" blank">JavaScript 实现 的 3D 球 面 标签 云 效果 </a> 
<span>2011-03-29</span> 
</div> 
SAE 
<Ei> 
<p></p> 
<div> 
<a href="#" target=" blank"> 周 六 JavaScript 聚会 活动 现场 记录 </a> 
<span>2011-03-27</span> 
</div> 
</1i> 
<1i> 
<p></p> 
<div> 
<a href="#" target=" blank"> 阿 里 前 端面 试题 </a> 
<span>2011-03-19</span> 
</div> 
</1i> 
<1i> 
<p></p> 
<div> 
<a href="#" target=" blank"> 浅 析 google 地 图 前 端 实现 原理 (一 ) </a> 
<span>2011-03-19</span> 
</div> 
si> 
<IT1> 
<p></p> 
<div> 
<ahref="#"target=" blank">Windows 计算 器 (简易 版 〉 作 业 练习 一 一 妙 味 课堂 </a> 
<span>2011-03-19</span> 
</div> 
SW 
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< 
<p></p> 
<div> 
<a href="#" target=" blank” > 妙 味 课堂 一 一 手风琴 缓 动 效 果 </a> 
<span>2011-03-19</span> 
</div> 
</LL> 
<1i> 
<p></p> 
<div> 
<ahref="#" target=" blank">JavaScript 实现 的 3D 球 面 标签 云 效果 </a> 
<span>2011-03-19</span> 


</div> 
UL 
</ul> 
</div> 
</div> 
<dl> 
</body> 
</html> 
运行 代码 后 效果 如 图 15-13 所 示 。 
会 太 四 filey/ $v 刘 . 
EEC 
> 最 新 消息 > 茶馆 新 鲜 事 
课程 常见 问题 合集 》 JevaSeript 实 现 的 30 球 面 标签 云 3014 ) 
》 妙 味 课 党 二 课程 结 课 标准 7 》 导 六 JarS eript 葵 会 舌 动 观 场记 201 
》 网 页 特效 大 集合 海天 更 新 ) 》 阿 里 前 注 面 坛 题 O11-03-19 
她 叶 课 兴 上 课 地 点 Lo9-19 》 浅 折 eoeals 地 图 前 问 实 现 原 理 。 2011-03-19 
Css 巢 程 最 新 开间 时 间 31-00-19 》Winaows 计 算 器 《简易 版 ) 作 北 ”2011-03-19 
》JwrsSeript 课 程 最 新 开 班 时间。 2011 -0319 》 志 虽 理 堂 一 一 手 风 环 组 动 小 果 
》 旭 哇 推出 委 基 础 9 页 制作 课程 20410350 ，Javsseript 实 现 的 530 球面 标签 去 


图 15-13 ”鼠标 滑 过 渐变 效果 


15.5 ”高 手 训 练 营 


1. CSS 滤 镜 的 分 类 有 哪些 ， 各 有 哪些 典型 应 用 ? 
2. 多 滤 镜 同时 使 用 时 ， 按 什么 规则 执行 ? 
3.， 制作 一 个 如 图 15-14 所 示 的 网 页 ， 要 求 上 面 两 幅 图 片 在 筷 标 滑 过 时 变 成 灰色 。 
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图 15-14 操作 题 1 效果 


4. 观察 图 15-15 中 的 文字 效果 ， 分 析 使 用 哪些 滤 镜 ， 并 实现 它 。 
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图 15-15 操作 题 2 效果 
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DHTML 是 Dynamic HTML 的 简称 ， 是 动态 网 页 的 意思 ， 它 其 实 并 不 是 一 个 标准 的 术 
语 ， 是 相对 传统 的 静态 html 而 言 的 一 种 制作 网 页 的 概念 。 事 实 上 没有 一 种 技术 叫 作 
DHTML。DHTML 是 利用 CSS( 层 又 样式 表 ) 、JavaScript、HTML 等 技术 而 建立 的 能 与 
访问 者 产生 互动 的 网 页 ， 比 如 在 动态 网 页 里 ， 当 访问 者 点 击 了 某 一 张 图 片 后， 这 张 图 片 会 
自动 移动 ， 这 就 是 DHTML 效果 。 也 就 是 说 ， 当 网 页 下 载 完毕 后 ， 它 无 需 再 与 服务 器 连接 
就 能 产生 变化 了 。 

传统 的 HTML 网 页 就 像 搬 到 互联 网 上 的 书本 , 与 浏览 者 缺乏 交互 。 随 着 互联 网 应 用 领 
域 的 日 益 广泛 , 传统 的 HTML 网 页 表现 力 显得 捉襟见肘 。 为 了 增加 网 页 的 交互 性 和 表现 力 ， 
发 展 了 很 多 技术 ， 如 Java Applet 和 ActiveX 等 ， 这 些 技术 一 般 都 使 用 特定 的 开发 语言 或 开 
发 工具 ， 一 般 的 网 页 制作 者 不 易 掌 握 ， 而 且 使 用 这 些 技术 开发 的 动态 网 页 容量 很 大 ， 下 载 
速度 缓慢 。 而 DHTML 则 在 很 大 程度 上 降低 了 制作 交互 性 动态 网 页 的 难度 。DHTML 只 是 
在 传统 的 HTML 的 基础 之 上 增加 了 CSS 和 脚本 语言 , 容易 掌握 。 DHTML 的 动态 效果 和 交 
互 性 是 由 浏览 器 实现 的 ， 不 需要 服务 器 的 参与 。 


本 章 要 点 : 
口 JavaScript 语法 基本 语法 

口 JavaScript 函数 、 事 件 和 对 象 
口 JavaScript 动 态 应 用 

口 CSS 和 JavaScript 的 合用 


16.1 JavaScript 简介 


动态 网 页 的 交互 性 来 自 于 内 撕 的 脚本 语言 。 现 在 用 于 制作 动态 网 页 的 脚本 语言 主要 有 
JavaScript 和 VBScript。 现 有 的 浏览 器 中 基本 上 都 支持 JavaScript, 所 以 以 JavaScript 为 例 来 
进行 讲解 。 


16.1.1 JavaScript 基本 语法 


JavaScript 是 一 种 嵌入 式 脚本 语言 ， 和 Java 语言 不 同 的 是 JavaScript 不 需要 进行 编译 ， 
而 是 直接 把 源 代 码 嵌 入 到 网 页 当中 。 当 浏览 网 页 时 ，JavaScript 的 源 代码 随 网 页 一 同 下 载 到 
浏览 器 中 ， 然 后 由 浏览 器 负责 解释 执行 。 
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JavaScript 在 页 面 中 的 语法 如 下 : 


<Script language="JavaScript"> 
在 这 中 间 加 入 JavaScript 程序 代码 ; 
</Script> 


代码 也 可 以 这 样 写 : 


<Script type="text/Javascript"> 
在 这 中 间 加 入 JavaScript 程序 代码 ; 
</Script> 


可 以 同时 加 上 “language” 和 “text” 两 个 属性 ， 这 种 情况 用 的 比较 多 ， 代 码 如 下 : 


<Script language="JavaScript" type="text/javascript"> 
在 这 中 间 加 入 uavaScript 程序 代码 ; 
</Script> 


在 页 面 中 一 般 可 以 在 三 个 地 方 编写 JavaScript 脚本 代码 : 
(1) 通过 一 对 HTML 标签 就 可 以 把 JavaScript 嵌入 到 网 页 的 任何 地 方 。 
<Scrip 人 标签 的 位 置 并 不 是 固定 的 ， 可 以 出 现在 <head> 或 者 <body> 中 的 任何 地 方 ， 使 
用 最 多 的 情况 是 放 在 <head> 里 面 ， 在 一 个 文档 中 可 以 有 多 个 <Scrip 忆 标签 来 嵌入 多 有 段 
JavaScript 代码 ， 每 段 代码 可 以 互相 访问 ， 同 将 所 有 JavaScript 代码 放 在 一 对 <Scrip 必 标签 
中 的 效果 是 一 样 的 。 


四 日 版 本 的 浏览 器 并 不 能 识别 <Script> 标 签 ， 可 以 把 <Script></Scrip 人 > 标签 对 中 的 内 
容 用 HTML 起 始 和 结束 注释 标记 <!-- 和 --> 包 括 起 来 。 支 持 <script> 标 签 的 浏览 器 
会 忽略 嵌入 在 <Script></Script> 标 签 对 中 的 注释 符 ,也 就 是 它 会 继续 执行 注释 符 之 
间 的 脚本 程序 。 


(2) 将 JavaScript 脚 本 代码 文件 写 好 之 后 ,放置 在 一 个 单独 的 文件 中 , 并 且 命名 为 xxx.js 
格式 ， 然 后 只 需要 在 HTML 网 页 中 引入 JavaScript 脚本 文件 的 URL 地 址 即 可 (js 文件 )。 
(3) 将 脚本 程序 代码 作为 某 个 元 素 的 事件 属性 值 或 超 链接 的 “href” 属 性 值 。 
超 链接 <a> 标 签 的 “href” 属 性 除了 可 以 使 用 “http” 和 “mailto” 等 协议 之 外 ， 还 可 以 
使 用 Javascript 协议 ， 语 法 如 下 : 


er ee 
单 击 这 个 超 链接 ， 浏 览 器 将 会 执行 JavaScript 后 面 的 脚本 程序 代码 。 
16.1.2 ” JavaScript 数据 类 型 
JavaScript 脚本 语言 同 其 他 语言 一 样 , 有 它 自身 的 基本 数据 类 型 、 表 达 式 和 算术 运算 符 
及 程序 的 基本 框架 结构 。JavaScript 中 有 5 种 简单 数据 类 型 〈 也 称 为 基本 数据 类 型 ) : 
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Undefined、Null、Boolean、Number 和 String， 还 有 1 种 复杂 数据 类 型 一 Object。 
(1) Undefined 一 一 Undefined 类 型 只 有 一 个 值 ， 即 特殊 的 “undefined”。 在 使 用 “var” 
声明 变量 但 未 对 其 加 以 初始 化 时 ， 这 个 变量 的 值 就 是 “undefined”， 语 法 如 下 : 


Var message; 


alert (message == undefined) 


(2) Null 一 一 Null 类 型 的 值 是 “nul”， 它 表示 一 个 空 对 象 指针 ， 没 有 指向 任何 对 象 ， 
如 果 一 个 变量 的 值 是 “null”， 那 当前 变量 很 有 可 能 就 是 垃圾 收集 的 对 象 ， 使 用 “typeof” 
监测 “null” 值 时 会 返回 “object”。 语 法 如 下 : 


Var people = null; 
alert (typeof people );//"object" 
(3) Boolean 一 一 Javascript 中 的 布尔 值 和 Java 中 的 一 致 ， 该 类 型 只 有 两 个 字面 值 : 
“true” 和 “false”。 这 两 个 值 与 数字 值 不 是 一 回 事 ，“true” 表 示 真 ，“false” 表 示 假 ， 
但 “true” 不 一 定 等 于 “1”， 而 “false” 也 不 一 定 等 于 “0”。 语 法 如 下 : 


var isMale=true; 


var isFemale=false; 


(4) Number 一 一 数值 类 型 有 很 多 值 ， 最 基本 的 当然 就 是 十 进 制 。 语 法 如 下 : 


var num=20; 


除了 十 进 制 ， 整 数 还 可 以 通过 八进制 或 十 六 进 制 ， 其 中 ， 八 进 制 字面 值 第 一 位 必须 是 
0， 然 后 是 八进制 数字 序列 。 而 十 六 进 制 前 面 则 必须 是 0x， 后 跟 十 六 进 制 数 字 (0~F) ,不 
分 大 小 写 。 语 法 如 下 : 


var numl=070;// 八 进 制 的 56 
var num2 = 0xA;// 十 六 进 制 


虽然 可 以 表示 为 八进制 和 十 六 进 制 ， 但 是 计算 时 会 被 转换 成 十 进 制 值 。 
(5) String 一 一 字符 串 类 型 ， 可 以 由 单 引 号 或 双 引 号 表示 , 在 Javascript 中 这 两 种 引号 
是 等 价 的 ， 不 过 就 是 要 注意 正确 嵌 套 。 语 法 如 下 : 


Var name = 'qwe'; 
Var author = "qwe"; 
(6) Object 一 一 对 象 (Object) 是 一 种 非常 重要 的 数据 类 型 ， 对 象 是 自我 包含 的 数据 


集合 ,包含 在 对 象 里 的 数据 可 以 通过 两 种 形式 一 属性 (Property: 隶属 于 某 个 特定 对 象 的 变 
量 ) 和 方法 (mothod: 方法 是 只 有 某 个 特定 对 象 才能 调用 的 函数 ) 访问 ， 对 象 就 是 由 一 些 
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彼此 相关 的 属性 和 方法 集合 在 一 起 而 构成 的 一 个 数据 实体 。 在 JavaScript 脚本 里 ， 属 性 和 
方法 都 需要 使 用 “.” 号 来 访问 。 语 法 如 下 : : 


Object .property 
Object .method () 


16.1.3 _ JavaScript 事件 、 函 数 与 对 象 


1. 事件 


JavaScript 与 Web 页 面 之 间 的 交互 是 通过 用 户 操作 浏览 器 页 面 时 触发 相关 事件 来 实现 
的 。 例 如 ， 在 页 面 载 入 完毕 时 将 触发 “onload” ( 载 入 ) 事件 、 当 用 户 单 击 按钮 时 将 触发 
按钮 的 “onclick” 事 件 等 。 事 件 处 理 程 序 则 是 用 于 响应 某 个 事件 而 执行 的 处 理 程序 。 事 件 
处 理 程序 可 以 是 任意 JavaScript 语句 ， 但 通常 使 用 特定 的 自 定义 函数 (Function) 来 对 事件 


进行 处 理 。 


多 数 浏览 器 内 部 对 象 都 拥有 很 多 事件 ， 下 面 将 以 表格 的 形式 给 出 常用 的 事件 及 何 时 触 
发 这 些 事 件 。JavaScript 的 常用 事件 如 表 16-1 所 示 : 


表 16-1 JavaScript 常用 事件 


事 件 触发 时 间 
onabort 对 象 载 入 被 中 断 时 触发 
onblur 元 素 或 窗口 本 身 失 
改变 <select> 元 素 中 的 选项 或 其 他 表单 元 素 失 去 焦点 , 并 且 在 其 获取 焦点 后 内 容 发 生 
onchange _ 
过 改变 时 触发 
onclick 单 击 时 触发 。 当 光标 的 焦点 在 按钮 上 ， 并 按 下 回 车 键 时 ， 也 会 触发 该 事件 
ondblclick 双击 时 触发 
onerror 出 现 错误 时 触发 
onfocus 任何 元 素 或 窗口 本 身 获 得 焦点 时 触发 
键盘 上 的 按键 (包括 Shif 或 Alt 等 键 ) 被 按 下 时 触发 ， 如 果 一 直 按 着 某 键 ， 则 会 不 
onkeydown 
断 触发 。 当 返回 false 时 ， 取 消 默 认 动 作 
人 键盘 上 的 按键 被 按 下 ， 并 产生 一 个 字符 时 发 生 。 也 就 是 说 ， 当 按 下 Shift 或 Alt 等 键 
时 不 触发 。 如 果 一 直 按 下 某 键 时 ， 会 不 断 触发 。 当 返回 false 时 ， 取 消 默认 动作 
onkeyup 释放 键盘 上 的 按键 时 触发 
页 面 完 全 载 入 后 ， 在 Window 对 象 上 触发 ， 所 有 框架 都 载 入 后 ， 在 框架 集 上 触发 ; 
onload <img> 标 记 指定 的 图 像 完 全 载 入 后 , 在 其 上 触发 ; 或 <object> 标 记 指定 的 对 象 完 全 载 
入 后 ， 在 其 上 触发 
onmousedown 单 击 任何 一 个 鼠标 按键 时 触发 
onmousemove 鼠标 在 某 个 元 素 上 移动 时 持续 触发 
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( 续 表 ) 
事件 触发 时 间 
onmouseout 将 鼠标 从 指定 的 元 素 上 移 开 时 触发 
onmouseover 鼠标 移 到 某 个 元 素 上 时 触发 
onmouseup 释放 任意 一 个 鼠标 按键 时 触发 
onreset 单 击 重 置 按钮 时 ， 在 <form> 上 触发 
onresize 窗口 或 框架 的 大 小 发 生 改变 时 触发 
onscroll 在 任何 带 滚动 条 的 元 素 或 窗口 上 滚动 时 触发 
onselect 选中 文本 时 触发 
onsubmit 单 击 提交 按钮 时 ， 在 <form> 上 触发 
页 面 完 全 印 载 后 ， 在 Window 对 象 上 触发 : 或 者 所 有 框架 都 卸载 后 ， 在 框架 集 上 
onunload 
触发 
2 函数 


如 果 需 要 多 次 使 用 同一 组 语句 ， 可 以 把 这 些 语句 打包 成 一 个 函数 。 所 谓 函 数 就 是 一 组 
允许 人 们 在 代码 中 随时 调用 的 语句 。 从 效果 上 看 ， 每 个 函数 都 相当 于 一 个 短小 的 脚本 。 

使 用 函数 的 目的 是 为 了 使 代码 清晰 、 易 懂 、 易 读 、 易 维护 ， 因 此 一 个 函数 中 的 代码 不 
要 太 长 ， 否 则 这 个 代码 就 会 变 得 比较 难 理解 。 其 语法 为 : 


function 函数 名 (参数 列表 ) 
i 

程序 代码 

return 表达 式 ; 
} 


function 是 函数 的 固定 标志 。 

参数 列表 : 就 是 程序 在 调用 某 个 函数 ， 执 行 其 中 的 程序 代码 时 ， 有 时 需要 给 函数 传递 
- 些 参数 ， 这 时 就 有 了 参数 列表 〈 即 使 没有 参数 ， 方 法 名 后 面 的 括号 也 不 能 省 ) 。 

返回 值 : 如 果 主 程序 要 求 函数 返回 一 个 结果 ， 就 必须 使 “returm” 语 名 后 面 跟 上 这 个 要 返回 
的 结果 。 如 果 没 有 返回 值 或 者 不 写 “retum ”语句 ， 这 个 函数 就 返回 一 个 为 “undefined” 的 值 。 

在 定义 了 这 个 函数 的 页 面 中 ， 可 以 从 任意 位 置 去 调用 这 个 函数 ;引入 这 个 页 面 后 ， 还 
可 以 从 其 他 页 面 访问 它 。 一 般 来 说 ， 对 于 共通 性 强 ， 适 用 面 广 ， 会 在 多 个 页 面 中 调用 的 函 
数 ， 一 般 把 它们 放 在 一 个 JavaScript 页 面 中 ， 然 后 由 需要 使 用 这 些 函 数 的 页 面 引入 ; 而 对 
于 只 适用 于 一 个 页 面 的 函数 ， 还 是 把 它 放 在 单个 页 面 中 较 好 。 

在 JavaScript 中 ， 函 数 不 仅 能 够 以 参数 的 形式 接受 数据 ， 运 行 代码 ， 它 和 其 他 编程 语 
言 中 的 函数 一 样 ， 可 以 返回 数据 数值， 字符 串 ， 数 组 或 者 一 个 布尔 值 〉。 

让 JavaScript 函数 返回 数据 ,不 需要 也 不 能 在 函数 签名 上 动 任何 手脚 ,只 需要 用 return 
语句 返回 你 想 返回 的 数字 即 可 ， 语 法 如 下 : 
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function substract (qql,qq2) 


return qql-qq2; 


L 


函数 ， 一 般 把 它们 放 在 一 个 JavaScript 页 面 中 ， 然 后 由 需要 使 用 这 些 函 数 的 页 面 引 入 ; 
而 对 于 只 适用 于 一 个 页 面 的 函数 ， 还 是 把 它 放 在 单个 页 面 中 较 好 。 


3. 对 象 的 属性 和 方法 


JavaScript 的 一 个 重要 功能 就 和 


是 面向 对 象 的 功能 , 通过 基于 对 象 的 程序 设计 , 可 以 用 更 


直观 、 模 块 化 和 可 重复 使 用 的 方式 进行 程序 开发 。 
Javascript 对 象 是 由 属性 (properties) 和 方法 (methods) 两 个 基本 元 素 组 成 。 比 如 要 设 定 网 
页 的 背景 颜色 ， 所 针对 的 对 象 就 是 “document "”， 所 用 的 属性 是 “bgcolor ”， 如 
document.bgcolor="blue"， 就 是 表示 使 背景 的 颜色 为 蓝 色 。 对象 与 其 属性 a 用 “.” 连接， 
如 document write0， 表 示 在 页 面 显示 括号 中 的 内 容 ， 其 中 “document” 是 对 象 ， te” 是 方法 。 
下 面 列举 几 个 常用 的 对 象 及 其 常用 属性 和 方法 ， 如 表 16-2 所 示 : 


表 16-2 对 象 及 方法 


属性 和 方法 document 对 象 

write 在 网 页 显示 括号 里 的 内 容 

openO 打开 文档 document.open0 

close0) 关闭 输出 流 

hasFocusO 是 否 获 得 焦点 

focus 使 获得 焦点 

linkColor 设置 或 获取 文档 内 未 经 点 击 链接 的 颜色 

alinkColor 设置 或 获取 被 激活 链接 的 颜色 

VlinkColor 设置 或 获取 已 点 击 过 的 链接 颜色 

bgColor 设置 或 获取 文档 的 背景 颜色 

charset 设置 解码 字符 集 

title 设置 或 获取 页 面 标题 

links 页 面 中 的 所 有 链接 

anchors 页 面 中 的 锚 点 集合 

属性 和 方法 body 对 象 

backgound 设置 背景 图 片 

人 设置 背景 图 片 是 否 能 够 滚动 : 空 字符 串 〈 默 认 ) 是 可 以 滚动 ; 
fixed 是 不 可 以 滚动 

linkColor 同 documentlinkColor 

scroll 设置 滚动 条 是 否 开启 ， 对 所 有 的 html 元 :yes or no 
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( 续 表 ) 

属性 和 方法 body 对 象 
scrollLeft 设置 或 获取 横向 滚动 的 距离 
scrollTop 设置 或 获取 纵向 滚动 的 距离 
type 选中 区 域 的 类 型 ， 返 回 Text 或 None 
clear0) 清除 选中 区 域 的 内 容 

属性 和 方法 window 对 象 
alert(mse) 弹出 一 个 警告 对 话 框 
confirm(msg) 弹出 一 个 确认 对 话 框 
prompt(msg,value) 弹出 一 个 输入 对 话 框 ，.msg 是 提示 内 容 ，value 为 默认 值 
blur0 使 window 失去 焦点 
focus0) 使 window 获得 焦点 
close0 关闭 窗口 
open0 打开 一 个 新 的 窗 : window.open(url,target,features) 
navigate(url 页 面 定向 到 指定 的 url 中 
closed 判断 引用 的 窗口 是 否 已 经 关闭 
opener 返回 不 前 窗口 的 父 窗口 的 引用 

方 ” 法 date 对 象 
getFullYear0 返回 完整 年 份 的 数字 4 位 ， 对 应 有 set 方法 
getYea 返回 年 份 的 数字 〈1900 到 1999 只 2 位 数字 ) ， 对 应 有 set 方法 
getMonth) 返回 月 份 (0-11) ， 对 应 有 set 方法 
getDate0) 返回 日 期 (1-31) ， 对 应 有 set 方法 
getDay0 返回 星期 几 (0 是 星期 天 , 1 是 星期 一 , 2 是 星期 二 …6 是 星期 六 )， 
对 应 有 set 方法 

getHoursO) 返回 小 时 数 ， 对 应 有 set 方法 
getMinutesO 返回 分 钟 数 ， 对 应 有 set 方法 
getSecondsO 返回 秒 数 ， 对 应 有 set 方法 
getMillisecondsO 返回 毫秒 值 


16.1.4 ”JavaScript 动态 应 用 实例 
实例 16-1: 弹出 一 个 欢迎 小 窗口 


地 > 程序 代码 


<html> 
<head> 
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<title>JavaScript 动态 实例 </title> 

<Script language="JavaScript" type="text/javascript"> 
<!-~— 

function showmsg() 

{ alert ("欢迎 使 用 JavaScript 动态 效果 ") } 

WA 

</Script> 

</head> 

<body> 

<form> 

<input type="button" onclick="showmsg(); ”value=" 查 看 效果 "> 
</form> 

</body> 

</html> 


先 定义 一 个 函数 showmsg()， 利 用 “window” 对 象 的 “alert” 方 法 弹出 一 个 欢迎 信息 
框 ， 然 后 在 “body” 中 用 “onclick” 事 件 触 发 调用 该 函数 ， 显 示人 信息， 运行 代码 后 效果 如 
图 16-1 所 示 。 


ol x 


Pile Ss CNuserswzcDesktopVavascripthm| P -CCx 攻 省 年。 
Senseipasx 


从 - 团 * 口 中” PpP) 安全 (9)> IROv 各 -回忆 六 


图 16-1 弹出 欢迎 窗口 


16.2 CSS+Javascript 


通过 前 面 章节 的 学 习 ， 己 经 掌握 了 使 用 CSS( 层 县 样式 表 ) 来 产生 各 种 多 彩 的 页 面 ， 
动态 十 足 。 如 果 CSS 再 与 Javascript 配合 使 用 ， 将 会 增加 更 多 的 交互 性 动态 效果 ， 使 自己 
的 网 页 趣味 横生 ， 更 加 绚丽 多 彩 。 

实例 16-2: 制作 肚 动 的 广告 条 

<htm]l> 


<head> 
<title> 桂 动 的 广告 条 </title> 


和 
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<style><!—— 

body {font-size:9pt} 

move { 

cursor:hand; 
position:absolute; 
visibility:hidden; 

height:60; 

width:120; 

color:yellow; 

border:blue lpx solid; 
background-color:rgb(0,200,100); 
} 

= 

</style> 

<script language="JavaScript"> 
var all=document .all; 


var flag=1;// 变 量 flag 用 来 控制 “执行 或 终止 执行 函数 Move () ” 


var xhd=0; i 号 灯 ， 用 于 控制 “广告 层 ” 的 移动 方向 

function Moveadver (){ 

all.adver.style.top=document .body.offsetTop; // 对 象 adver 的 top 属性 等 于 对 象 
body 的 offsetTop 值 

all.adver.style.left=document .body.offsetLeft; 

all.adver.style.visibility = "visible"; 

if (flag==1) 

{ 

act = window.setInterval ("Move () ",50) ;// 执 行 函数 Move () 

flag=0; 

1 

else 

{ 

window.clearInterval (act);// 终 止 执行 函数 Move () 

all.adver.style.visibility = "hidden";// 隐 藏 对 象 adver 

flag=1; 

YE 

}//function 

function Move(){ 

if(all.adver.style.pixelLeft>=document .body.offsetLeft+350) xhd=1; 

if(all.adver.style.pixelLeft<=document .body.offsetLeft) xhd=0; 

if (xhd==0) 

上 

// 对 象 adver 往 右 下 方 移动 

all.adver.style.pixelLeft+=5; 

all.adver.style.pixelTop+=5; 


"3s 
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} 

else 

{ 

// 对 象 adver 往 左 上 方 移动 
all.adver.style.pixelLeft-=5; 
all.adver.style.pixelTop-=5; 
}//if 


}//function 


</script> 

</head> 

<body onclick="Moveadver () "> 

<p align="center" > 单 击 鼠标 广告 层 出 现 , 再 次 单 击 广告 层 消 失 , 再 重复 …*…</p> 


<div id="adver" class="move"><p valign="middle" align="center"><br><b> 疗 
效 好 不 好 <br> 一 试 就 知道 <b></p></div> 

</body> 

</html> 


先 用 CSS 定义 广告 条 的 样式 ， 然 后 用 Javascript 函数 控制 广告 条 的 移动 ， 运 行 代码 后 
效果 如 图 16-2 所 示 。 


Emel™>™ 
ey €) CAlcerdwr\Dedicrr\ iavacrript html Drox | er] 
Ere x jj 

文 HR) 妨 霹 日 、 豆 夸 (\) 收 荐 夫 ( 工具 Mm 种 助 中 ) 

从 ~- 团 - 局 县 - Ep) 去 46)- IRO)- 合 - 国人 区 必 


总 击 遍 标 上 告 后 出 更, 再 广 单 出 ! 十 层 消 大, 丙 号 导 …… 


图 16-2 飘动 的 广告 条 


16.3 难点 解析 


本 章 难 点 就 是 事件 、 函 数 和 对 象 。 事 件 是 调用 函数 或 方法 的 接口 ， 方 法 是 对 象 中 具体 
实现 的 函数 ， 函 数 就 是 某 一 功能 的 封装 ， 优 点 是 可 以 一 定 程度 封装 数据 和 实现 同一 代码 的 
重复 使 用 。 对 象 就 是 一 个 具体 的 事物 ， 它 拥有 方法 和 属性 ， 拿 现实 中 的 例子 来 说 ， 比 如 一 
个 网 页 中 的 元 素 在 JavaScript 中 也 是 一 个 对 象 ， 有 很 多 属性 ， 宽 ， 高 ， 颜 色 ， 背 景 图 片 等 ， 
它 也 有 很 多 方法 ， 这 些 方法 可 以 是 默认 就 有 的 ， 也 可 以 是 自己 定义 的 ， 比 如 定义 了 一 个 函 
数 ， 功 能 是 返回 这 个 元 素 的 高 度 属性 ， 然 后 这 就 成 了 这 个 对 象 的 方法 了 。 


ya 
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164 综合 实例 


实例 16-3: 测验 


< 程序 代码 


<html> 
<head> 
<title> 现 场 答题 </title> 
<Script language="JavaScript" type="text/javascript"> 
function scorescore (form) { 
Score=0 
if(form.kaotil.value!=null && form.kaotil.value=="ok") {score=score+l1} 
if(form.kaoti2.value!=null && form.kaoti2.value=="ok") {score=score+1} 
if(form.kaoti3.value!=null && form.kaoti3.value=="ok") {score=score+l1} 
form.SCORE .value =eval (score) 
} 
function clearscore (form) { 
score=0 
form. kaotil.value="" 
form. kaoti2.value="" 
form.kaoti3.value="" 
form.SCORE .value =eval (score) 
} 
</Script> 
</head> 
<body> 
<table width="75%" border="0" align="center"> 
er <td> 
<form name="test" method="post" enctype="text/plain" 
onLoad="clearscore (this.form)" onSubmit="msg()"> 
选择 题 : 
<br> 
<hr> 
1. Document .write 这 个 方法 是 干什么 用 
<ol> 
<input type="radio" name="kaotil" value=" 在 页 面 显示 内 容 " 
onClick=kaotil.value="ok"> 
在 页 面 显 示 内 容 <br> 
<input type="radion name="kaotil" value=" 关闭 当前 页 面 " 
onClick=kaotil.value="no"> 
关闭 当前 页 面 <br> 
<input type="radio" name="kaotil" value=" 打 开 新 页 面 " 
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onClick=kaotil.value="no"> 
打开 新 页 面 <br> 
</ol1> 
2. Javascript 声明 变量 的 关键 词 是 o 
<ol> 


<input type="radio" name="kaoti2" value="ver" 
onClick=kaoti2.value="no"> 
ver<br> 
<input type="radio" name="kaoti2" value="var" 
onClick=kaoti2.value="ok"> 
var<br> 
<input type="radio" name="kaoti2" value="vor" 
onClick=kaoti2.value="no"> 
vor<br> 
</o1> 
3. Javascript 对 象 调用 属性 和 方法 用 连接 符 。 
<ol> 
<input type="radio" name="kaoti3" value="-—" 
onClick=kaoti3.value="no"> 
-<br> 
<input type="radio" name="kaoti3" value="=" 
onClick=kaoti3.value="no"> 
=<br> 
<input type="radio" name="kaoti3" value="." 
onClick=kaoti3.value="ok"> 
.<br> 
</o1> 
<hr> 
<div align="center"> 
<input type="button" name="submit"” value=" 查 看 成 绩 " 
onClick=scorescore (this.form) class="ceyan"> 


<input type="reset" name="reset" value=" 重 新 测试 " 
onClick=clearscore (this.form) class="ceyan"> 


<br> <br> 
考试 分 数 : <input name="SCORE" type="text" class="ceyan"> 
</div> 
</form> 
</td> 
</tr> 
</table> 
</body> 
</html> 


首先 在 “head” 部 分 定义 两 个 判断 分 数 的 Javascript 函数 : 第 一 个 函数 判断 答案 和 计 分 ， 
第 二 个 函数 重 置 分 数 。 运 行 代码 后 效果 如 图 16-2 所 示 。 


= 
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Er 
芥 ~ 园 * 呈 中 ”Im =2G” IEOv 生 - 国 六 民 
选择 题 。 
1，Docunent. write 这 个 方法 是 于 什么 用 
时 在 页 面 显示 内 容 | 


9 关闭 当前 页 面 
打开 新 页 面 


23，Javascript 声 明 变量 的 关键 词 是 


® var 
i 
3. Javascript 对 象 调用 属性 和 方法 月 连接 符 。 
EL 
考试 分 数 ， 3 
图 16-2 测验 


16.5 “高手 训练 营 


列举 筷 标 的 常用 的 触发 事件 ? 

邯 数 的 基本 格式 ? 

对 象 的 两 个 基本 属性 ? 

创建 一 个 简单 的 Javascript 程序 段 来 显示 时 间 。 
运行 下 面 的 程序 代码 ， 查 看 结果 。 


地 > 程序 代码 


a 


<html> 

<body> 

<script type="text/javascript"> 
prompt (" 请 输入 你 的 报价 "，" 圣 ") ; 


var ex=confirm(" 确 定 吗 "); 


if (ex == true) 

alert ("确定 "); 

else 

alert ("取消 "); 
document .write ("谢谢 ") 
</script> 

</body> 

</html> 
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HTML 学 到 最 后 就 是 为 了 做 出 自己 的 网 站 ， 它 是 用 户 展现 个 人 创意 的 空间 ， 用 户 可 以 
根据 自己 的 个 性 爱好 设计 自己 喜爱 的 不 同 风格 特色 的 页 面 ， 多 个 页 面 组 成 一 个 网 站 。 网 站 
做 好 以 后 就 可 以 发 布 出 来 供 浏览 。 用 户 既 可 以 发 布 到 本 地 服务 器 上 ， 也 可 以 发 布 到 互联 网 
的 服务 器 上 。 在 互联 网 发 布 网 站 需要 空间 和 域名 支持 , 才能 够 访问 , 这 个 需要 自己 去 申请 。 


口 个 人 网 站 分 析 设 计 
口 本 地 服务 器 的 架设 
D 本 地 站 点 的 发 布 
D 互联 网 站 点 发 布 


17.1 个 人 网 站 设计 


17.1.1 设计 分 析 


个 人 网 站 的 设计 说 简单 也 简单 ， 说 难 也 难 。 说 简单 是 指 个 人 网 站 的 设计 可 以 不 受 任何 
规范 的 约束 ， 设 计 者 可 以 完全 按照 自己 的 想法 去 设计 ， 去 表现 自己 的 创意 和 个 性 ， 再 加 上 
HTML 可 以 让 用 户 轻松 设计 出 自己 的 主页 。 说 难 是 指 要 设计 一 个 优秀 的 页 面 是 需要 付出 努 
力 的 ， 它 需要 广泛 的 知识 、 审 美的 眼光 、 精 心 的 投入 ， 还 需要 用 户 慢 慢 体 会 与 摸索 。 一 般 
来 说 设计 个 人 站 点 面 要 注意 以 下 几 个 问题 。 

1 定位 明确 ， 主 题 突 出 


主题 是 指 网 页 上 表现 的 主要 思想 内 涵 ， 它 是 网 页 的 灵魂 。 网 站 设计 表达 的 是 一 定 的 意 
图 和 要 求 ， 有 明确 的 主题 。 设 计 者 可 以 通过 对 网 页 构成 元 素 进行 条 理性 处 理 ， 更 好 地 营造 
符合 设计 目的 的 环境 ， 突 出 主题 ， 增 强 浏览 者 对 网 页 的 注意 力 ， 增 进 对 网 页 内 容 的 理解 。 
比如 ， 可 以 把 主题 定位 在 自我 展示 、 交 友 、 爱 好 或 者 摄影 等 比较 小 的 主题 上 ， 最 好 是 自己 
感 兴趣 的 内 容 。 

2. 内 容 与 形式 统一 


设计 网 页 不 能 只 讲 花 哨 的 页 面 ， 过 于 强调 独特 而 脱离 内 容 ， 或 者 只 求 内 容 而 缺乏 艺术 
的 表现 。 要 确保 网 页 上 的 每 一 个 元 素 都 有 存在 的 必要 性 , 不 要 为 了 炫 粹 而 使 用 元 余 的 技术 ， 
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那样 得 到 的 效果 可 能 会 适得其反 。 

3. 结构 清晰 ， 方 便 浏 览 

在 设计 网 页 时 ， 要 强调 页 面 各 组 成 部 分 的 共性 因素 或 者 使 各 部 分 共同 含有 某 种 形式 特 
征 ， 同 时 要 将 各 组 成 部 分 放 在 合理 的 位 置 上 ， 这 就 是 整体 布局 。 一 个 合理 的 布局 可 使 网 页 
内 容 显得 清晰 、 有 条 不 紊 ， 并 有 很 强 的 层次 感 ， 方 便 查 看 内 容 。 有 了 整体 性 强 的 布局 ， 才 
能 让 浏览 者 更 容易 理解 和 接受 网 页 的 主题 。 

4. 文字 与 图 像 的 编排 适当 


页 面 中 的 文字 和 图 片 搭配 要 适当 ， 不 要 整个 页 面 全 是 密密麻麻 的 文字 。 同 时 还 要 设计 
一 下 文字 的 样式 ， 使 文字 易于 阅读 ， 不 刺眼 。 图 片 使 用 之 前 最 好 处 理 一 下 ， 以 适合 自己 页 
面 的 要 求 。 页 面 中 文字 和 图 片 最 好 是 穿插 混 排 。 

结合 上 面 所 说 的 几 条 ， 可 以 先 用 笔 在 纸 上 勾 勒 出 主页 面 的 大 概 草图 ， 设 计 好 栏目 和 板 
块 ， 然 后 将 各 功能 模块 安排 到 页 面 上 ， 并 反复 调整 直到 满意 为 止 ， 最 后 将 定格 的 页 面 用 电 
脑 来 实现 。 
17.1.2 ”准备 工作 

站 点 的 结构 被 定格 以 后 ， 可 以 动手 准备 网 页 素材 了 。 

1. 文字 

文字 是 页 面 信息 最 重要 的 部 分 ， 也 是 最 常用 的 表达 手段 。 文 本 内 容 可 以 自己 撰写 或 者 
从 网 络 转载 ， 转 载 时 要 注 明 出 处 。 

2. 图 像 


如 果 页 面 中 没有 图 像 ， 就 缺少 生机 ， 让 用 户 兴 趣 减 半 ， 有 时 会 没有 读 下 去 的 耐心 。 图 
像 内 容 可 以 去 借助 软件 自己 制作 ， 如 Photoshop, 或 者 从 购买 的 素材 光盘 复制 , 或 者 从 网 络 
上 搜索 下 载 一 些 共享 的 东西 。 网 络 的 最 大 用 处 之 一 就 是 资源 共享 ， 用 户 可 以 充分 利用 网 络 
资源 。 从 网 络 下 载 的 图 片 最 好 自己 处 理 一 下 ， 以 符合 自己 页 面 的 表达 要 求 。 


3. 动画 、 音 频 、 视 频 


为 了 使 自己 的 页 面 充满 活力 ， 丰 富 多 彩 ， 用 户 可 以 在 页 面 中 适当 地 添加 动画 、 音 频 和 
视频 等 元 素 ， 用 于 表达 主题 的 需要 。 

4. 建立 站 点 

为 了 存放 和 管理 页 面 文件 和 素材 ,需要 先 建立 一 个 站 点 ， 此 处 创建 一 个 名 为 “myweb” 
的 本 地 站 点 。 

同时 为 了 避免 文件 和 素材 放置 混乱 ， 需 要 在 根 目 录 “myweb” 下 ， 再 建立 几 个 子 文件 
夹 用 于 存放 不 同类 别 的 素材 ， 如 创建 “images” 文 件 夹 用 于 存放 图 片 ， 创 建 “media” 文 件 
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来 用 于 存放 多 媒体 文件 等 。 
17.2 本 地 服务 器 发 


网 站 建 好 以 后 ， 可 以 先 在 本 地 发 布 浏览 一 下 。 
17.2.1 IIS 服务 器 搭建 

在 Windows XP Professional 操作 系统 中 ， 默 认 情况 下 IS 是 不 安装 的 ， 用 户 可 以 根据 
需要 进行 补充 安装 ， 具 体操 作 方法 如 下 。 

(1) 在 Windows 窗口 中 ,执行 【开始 】/【 控 制 面板 】/【 添 加 或 删除 程序 】 命 令 ， 打 
开 【 添 加 或 删除 程序 】 窗 口 ， 如 图 17-1 所 示 。 


艺 添加 或 副 除 程序 


口 显示 更 新 @) 排序 方式 @): | 名称 


病 anbe mesh Peer 9 ActiveX 
四 Mobe Flosh Floyer Flugin 


Mdobe Fhotoshop CS2 

万 和 rserr 41 

加 ATI - 软件 郑 载 实用 程序 

AL Am codecs 

NT ceayst Control camter 
名 NI mmlw Driver 

Sh ATI Parental Control Encoder 


[el Catalyst Control Center ~ Branding 
图 17-1 【添加 或 删除 程序 】 窗 口 
(2) 从 窗口 左 侧 的 按钮 面板 中 单 击 【添加 /删除 Windows 组 件 】 按 钮 , 打开 【Windows 
组 件 向 导 】 窗 口 ， 如 图 17-2 所 示 。 
Windows 组 件 向 导 


Yindors 钥 件 
可 以 添加 或 删除 Windows XP 的 组 件 。 


要 未 只 全 安吉 们 的 
0 语音 击 “ >» 


0.0MB 


上 狠 0utlook Express 0.0 吧 沁 


描述 ; 包括 Web 和 FTP i FrontPage、 事 务 处 理 、Active 


Ki- 步 ® | WwW” 


图 17-2 ”选择 组 件 


GR 
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(3) 从 【组 件 】 窗 口中 选中 “Internet 信息 服务 (IS)” 项 ， 单 击 “ 下 一 步 ” 按 钮 ， 出 
现 了 一 个 配置 组 件 的 窗口 ， 显 示 组 件 的 安装 进度 ， 如 图 17-3 所 示 ; 稍 后 还 会 出 现 要 求 
Windows XP Professional 安装 光盘 的 窗口 ， 如 图 17-4 所 示 。 


Windows 组 件 向 导 


正在 配置 组 件 
安装 程序 正在 根据 您 的 请 求 ， 进 行 配置 更 改 。 


动 请 稍 候 ， 安 装 程序 正在 配置 组 件 。 所 花 时 间 取决 于 选 定 的 组 件 。 


状态 检查 已 安装 的 文件 ... 
@ 


图 17-3 信息 提示 窗口 


请 格 标 为 “Windows XP Professional Service 
Pack 2 CD’ Es 盘 持 入 CD-RDN 豫 动 器 (G6:)， 然 
后 单 击 “ 确 定 ” 


eT 


图 17-4 ”安装 光盘 的 窗口 


(4) 将 安装 光盘 放 入 光驱 ， 然 后 单 击 “ 确 定 ” 按 钮 ， 则 组 件 的 安装 就 会 顺利 完成 。 
(5) 在 Windows 窗口 执行 【开始 】/【 所 有 程序 】/【 管 理工 具 】/【Internet 信息 服务 】 
命令 ， 会 出 现 【Internet 信息 服务 】 窗 口 ， 如 图 17-5 所 示 。 


E Internet 信息 服务 
文件 中 ”操作 由 ”查看 WD 帮助 
+ +| 国 | 轧 EE 县 | ， mil 


ne [HS 机 
S 电 YX-30PETF66132F 全 地 计算 机 | 胸 )K-30EETF681327 (本 地 计算 机 ) 
日 全 pe 


5 寺中 
四 已 谎 sr eps 


图 17-5 【Intemet 信息 服务 】 窗 口 


(6) 这 就 是 IIS 的 管理 平台 ， 可 以 看 到 ， 当 前 的 HS 版 本 是 V5.1。 
(7) 在 浏览 器 中 输入 “http://localhost” 后 ， 回 车 ， 在 浏览 器 中 打开 如 图 17-6 所 示 页 
面 ， 表 示 安 装 IS 组 件 成 功 。 


.324。 
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斑 鸡 迎 使 用 indows XP Server 
文件 四 ”编辑 EE) 查看 W) 收 豪 ) 工具 0) 帮助 如 


Ee- 日 轩 国 入 记 时 交合 -等 回 - 


地 直人 | 可] http://lecalhest/lecalstert sp 


a\ Windowsxp 


Professional 


Yeb 服务 正在 运行 


当前 设 有 为 用 户 设置 团 认 网 页 。 试 图 从 其 好 计算 机 连接 到 此 网 站 的 所 有 用 户 当前 大 将 收 


网 页 。 Yeb re te re 


defunlt. hte, default. asp, i hts, iisstart. asp* 当 效 。 只 有 
要 将 文 着 添加 到 默认 同 站 中 ， 请 将 文件 保存 在 <- \inetpub\wrereot\ 中 


sl 中 的 中 加 于 adows XP 计算 机 


iisstart asp- 


Vinder 
Tr 区 
-J 党 


计算 功能 。 通 过 ITS ， 各 ,通辽 Teb 与 好人: 


图 17-6 安装 成 功 


的 IIS 默认 的 WWW 根 目录 在 系统 盘 的 “\Inetpub\Wwwwroot” 文 件 夹 内 ， 此 文件 夹 内 


的 所 有 文件 都 可 以 通过 浏览 器 访问 到 。 


17.2.2 ”站 点 发 布 


IIS 服务 器 安装 完成 后 ， 需 要 进一步 的 配置 才能 浏览 本 地 站 点 内 容 。 
(1) 在 Windows 窗口 中 ， 执 行 【 开 始 】 代 控制 面板 】 命 令 ， 打 开 【 控 制 面 板 】 窗 口 ， 
再 双击 【管理 工具 】 图 标 打开 【管理 工具 】 窗 口 ， 如 图 17-7 所 示 。 


文件 四 编辑 外 查看 WD 收 若 ) 工具 CD) 于 助 0 
Os- 让 Pr 区 xx 回 - 
地 址 0) | 哆 管理 工具 

文件 和 文件 过 任务 

友 二 各 这 1 文件 

团 大 shi 个 文件 

站 复 和 这 个 文件 


全 人 1 文人 
以 电子 5 件 形式 发 送 

全 二 

XX 出 Bs 这 个 文件 


图 17-7 【管理 工具 】 窗 口 


(2) 双击 【Intemet 信息 服务 】 图 标 ,， 打开 【Internet 信息 服务 】 窗 口 ， 单 击 加 号 展开 


网 站 信息 ， 如 图 17-8 所 示 。 


(3) 右键 单 击 “ 默 认 网 站 ”， 在 打开 的 菜单 中 选择 “属性 ”项 ， 打 开 【 默 认 网 站 属 


性 】 对 话 框 ， 如 图 17-9 所 示 。 


(4) 单 击 “ 主 目 录 ” 按 钮 ， 展 开 【 主 目录 】 选 项 卡 ， 


单 击 【 本 地 目录 】 文 本 框 后 面 


的 “浏览 ”按钮 ， 在 打开 的 对 话 框 中 选择 个 人 网 站 所 在 文件 夹 ， 然 后 将 【脚本 资源 访问 】 


复 选 框 和 【 写 入 】 复 选 框 选中 ， 如 图 17-10 所 示 。 


“ss 


HTMI/CSS 网 页 设计 与 开发 一 站 式 学 习 一 一 难点 /案例 /练习 


nternet 信息 服务 
文件 到 ) 操作 @) ”查看 @) 帮助 0D 


息 服务 
JEK-90EETF65132F (本 地 计算 机 ndows\help\iishelp 


二 
一 例 IISielp 


C: \WINDOWS\web\printers 


四国 Printers 
由 国 inages 


由 国 -private 人 


国 _vti_seript 
国 vti_txt 


由 国 _vti_txt iisstart, asp 
由 赵 默认 SNTP 虚拟 服务 器 。 || 国 localstart. asp 


[nme gif 


图 17-8 【Intemet 信息 服务 】 窗 口 


ff Internet 信息 服务 默认 网 站 属性 
文件 中 操作) 查看 WD 帮助 和 0 二 入 自 定 义 鱼 误 hp_WET 


4 + 白 加 | 凶 国 图 | 国王 TISAET 第 过 器 “| 主 目 录 | 文档 


Interaet 信息 服务 和 
日 对 到 -90EE7F68132F (本 地 计算 机 描述 @) 
日 加 网 站 


理 地 址 C) 

TCF 端口 呈 ) 

连接 

连接 超时 0D) 

回 保持 JTTP 连接 gg) 


新 建 如 回 局 用 日 志 记录 到) 


| ME 所 有 任务 活动 日 志 格式 中 


TS3C 扩展 日 志文 件 格式 
查看 中 


重 命名 中 ) 


Ja 头 ER 三 可 区 加 扩展 
[Ts | _ 文 条。 | 目录 安全 性 
| 这 报到 大 天 时 的 内 容 末末 
| 全 此 it 竺 机 上 的 目录 中 ) 
| 人 〇 另 一 各 计 算 机 上 的 共享 G) 

OR WV 
| 本 地 路 径 C) 了 -信人 站 点 ET 本 

回民 本 资源 访问 0D) 区 
| 。 回 读 取 名) 回 条 3 扶 有 四 
ES 

口上 Mg 四 
| 。 应 用 程序 设置 

应 用 程序 各 网 双语 用 得 序 EST 
| se UA = 
| NE a Co. |) 

应 用 程序 保护 加 。 [让 二 用 ) “ww ) 
| 

[ET 本 EL 


图 17-10 设置 主 目录 
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“index.html” 为 默认 文档 。 站 点 目录 不 同 ， 默 认 文档 也 不 同 ， 对 于 HTML 网 站 来 
说 ， 它 的 默认 文档 一 般 为 “indexhtml” 。 

(5) 切换 到 【文档 】 选 项 卡 ， 单 击 “ 添 加 ”按钮 ， 在 打开 的 【添加 默认 文档 】 对 话 

框 中 输入 “index.html” 后 单 击 “ 确 定 ” 按 钮 ， 如 图 17-11 所 示 。 


TIP 头 || 自 定义 错误 
网 ， 。 | TSAET 第 二 器 


团 启 用 默认 文档 亿 ) 


Default htm 
下 | Default. asp 


国 [iisstart as 


口 启用 文档 页 脚 @) 


添加 默认 文档 
默认 文档 名 四 ); 


index. html 


图 17-11 添加 默认 文档 


(6) 选中 刚 添加 的 “index html” 文档 后 单 击 国 按钮 ， 将 该 文档 移 到 顶端 ， 如 图 17-12 
所 示 ， 然 后 单 击 “ 确 定 ”按钮 。 


| TP 头 自 定义 错误 ASP 0 服务 器 扩展 
| 网 站 ISAPI 第 选 器 主 目录 目录 安全 性 
回 启 用 默认 文档 名) 


index htay 
1 | Default. htm 
Default. asp 

rs]| index. htm 
iisstart. asp 


口 启 用 文档 页 脚 @) 


确定 ][ 取消 ] [应 用 内 
图 17-12 将 文档 移 到 顶部 


(7) 此 时 弹出 两 个 信息 提示 窗口 ， 直 接 按 “确定 ”按钮 即 可 ， 如 图 17-13 所 示 。 


we 
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下 列子 节点 也 定义 了 “访问 权限 ” 尾 性 的 值 ,此 值 将 覆 羞 悠 刚 设 定 的 值 。 请 
从 下 表 中 选择 应 使 用 新 值 的 站 点 。 


图 17-13 信息 提示 窗口 


(8) 配置 完成 ， 在 窗口 的 右 侧 显 示 该 目录 下 的 文件 和 文件 信息 。 然 后 在 服务 器 的 浏 
览 器 中 输入 http://localhost 或 者 http://127.0.0.1 即 可 浏览 主页 信息 。 


17.3 互联 网 空间 发 布 


网 站 制作 好 之 后 , 将 它 上 传 到 互联 网 上 去 , 不 传 到 互联 网 发 布 起 来 , 建设 网 站 没 意 义 。 
17.3.1 站 点 发 布 准备 


在 将 自己 的 站 点 上 传 到 互联 网 服务 器 供 大 家 浏览 之 前 ， 建 议 用 户 先 在 本 地 对 网 站 进行 
一 次 全 面 测试 ， 确 保 页 面 在 目标 浏览 器 中 如 预期 那样 显示 和 工作 ， 而 且 页 面 中 没有 断 开 的 
链接 ， 下 载 也 不 占用 太 长 时 间 。 

一 般 测试 站 点 可 从 如 下 几 个 方面 入 手 。 

(1) 检查 浏览 器 的 兼容 性 ;确保 页 面 在 目标 浏览 器 中 能 够 如 预期 工作 ， 并 确保 这 些 
页 面 在 其 他 浏览 器 中 要 么 工作 正常 ， 要 么 “明确 地 拒绝 工作 ”。 页 面 在 不 支持 样式 、 层 、 
插件 或 JavaScript 的 浏览 器 中 应 清晰 可 读 且 功能 正常 。 

(2) 在 浏览 器 中 预览 和 测试 页 面 : 应 尽 可 能 多 地 在 不 同 的 浏览 器 和 平台 上 预览 页 面 。 

这 样 可 使 得 用 户 有 机 会 查看 布局 、 颜 色 、 字 体 大 小 和 默认 浏览 器 窗口 大 小 等 方面 的 区 
别 ， 这 些 区 别 在 目标 浏览 器 检查 中 是 无 法 预见 的 。 

(3) 链接 检查 : 检查 站 点 是 否 有 断 开 的 链接 ， 并 修复 断 开 的 链接 。 

由 于 其 他 站 点 也 在 重新 设计 、 重 新 组 织 , 所 以 用 户 所 链接 的 页 面 可 能 已 被 移动 或 删除 。 
可 运行 链接 检查 报告 对 链接 进行 测试 ， 查 找 断 开 的 、 外 部 的 和 孤立 的 链接 和 修复 断 链接 。 

(4) 设置 下 载 时 间 和 大 小 首选 参数 ， 监 测 页 面 的 文件 大 小 及 下 载 这 些 页 面 所 占用 的 
时 间 。 要 知道 对 于 由 大 型 表格 组 成 的 页 面 ， 在 某 些 浏览 器 中 ， 在 整 张 表 完 全 载 入 之 前 ， 访 


= 
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问 者 什么 也 看 不 到 。 应 考虑 将 大 型 表格 分 为 几 部 分 ;如果 不 可 能 这 样 做 ， 请 考虑 将 少量 内 
容 《〈 例 如 欢迎 辞 或 广告 横幅 ) 放 在 表格 以 外 的 页 面 项 部 ， 这 样 用 户 可 以 在 下 载 表 格 的 同时 
查看 这 些 内 容 。 

(5) 测试 站 点 : 运行 一 些 站 点 报告 来 测试 并 解决 整个 站 点 的 问题 。 用 户 可 以 检查 整 
个 站 点 是 否 存 在 问题 ， 如 无 标题 文档 、 空 标签 以 及 匈 余 的 嵌 套 标签 等 。 

(6) 验证 标签 :检查 用 户 的 代码 中 是 否 存 在 标签 或 语法 错误 。 

网 站 测试 通过 之 后 ， 可 以 考虑 上 传 网 站 了 ， 在 上 传 之 前 ， 需 要 先 申请 一 个 空间 ， 这 样 
才能 将 网 站 发 布 到 远 端 服务 器 上 。 

从 费用 上 讲 ， 空 间 分 为 付费 空间 和 免费 空间 两 种 。 用 户 可 以 根据 网 站 的 性 质 和 实际 需 
要 来 选择 。 如 果 是 公司 企业 的 网 站 ， 需 要 一 个 稳定 的 服务 和 足够 的 空间 ， 那 么 一 般 选 择 付 
费 空间 。 如 果 是 个 人 站 点 这 样 的 小 网 站 ， 可 以 考虑 申请 免费 空间 。 收 费 空间 功能 齐全 ， 服 
务 稳定 ， 有 独立 的 了， 可 以 对 应 的 申请 一 个 一 级 域名 ， 也 没有 广告 的 骚扰 。 

在 申请 空间 时 ， 要 注意 空间 的 功能 ， 有 的 只 支持 HTML 文件 ， 有 的 支持 ASP 和 CGI 
等 程序 ， 一 般 免 费 的 空间 基本 上 都 是 限 功 能 的 ， 付 费 空间 基本 上 是 全 功能 的 。 

域名 的 申请 与 空间 申请 基本 相同 ， 它 一 般 都 是 伴随 着 空间 申请 一 起 来 的 ， 网 络 服务 商 
在 提供 空间 服务 时 一 般 都 提供 域名 服务 ， 它 也 有 付费 和 免费 之 分 ， 得 到 的 域名 等 级 不 同 。 
用 户 可 以 到 中 国 万 网 上 查看 具体 的 申请 方法 。 


对 于 新 手 来 说 ， 可 以 先 去 申请 一 个 免费 空间 ， 来 尝试 、 体 验 这 个 过 程 。 操 作 方 法 是 在 
搜索 引擎 中 搜索 “免费 空间 ”或 者 “免费 域名 ”等 关键 字 ， 即 可 搜索 到 很 多 提高 免费 服务 
的 网 站 。 找 到 一 个 合适 的 网 站 后 ， 就 可 以 去 申请 一 个 免费 的 空间 ， 一 般 也 会 随 赠 一 个 免费 


的 域名 给 用 户 。 
申请 过 程 一 般 按照 页 面 的 提示 信息 一 步 步 进 行 即 可 ， 直 到 最 后 申请 成 功 后 ， 发 给 用 户 


一 个 上 传 网 站 的 用 户 名 和 密码 及 上 传 地 址 ， 用 户 任 此 用 户 名 和 密码 就 可 以 上 传 站 点 了 。 
为 了 能 够 正常 发 布 ， 上 传 网 站 都 会 有 一 个 说 明 ， 规 定 用 户 网 站 的 首页 名 称 ， 一 般 主页 
名 规定 为 index.html、index.htm、index.asp、index.php、default.htm、default.asp 等 ， 在 上 传 
之 前 用 户 要 确认 一 下 自己 的 首页 名 ， 是 否 符合 要 求 。 
上 传 的 空间 一 般 是 FTP 网 站 ， 和 凭借 自己 的 账户 和 密码 ,用 户 可 以 将 站 点 内 容 直接 粘贴 
复制 进去 ， 这 种 方法 不 稳定 ， 容 易 中 断 出 错 ， 比 较 好 的 方法 是 借助 FTP 上 传 软件 将 站 点 上 
传 上 去 。 上 传 完 毕 后 ， 在 浏览 器 中 输入 网 站 提供 的 域名 ， 就 可 以 访问 自己 的 网 站 了 。 


17.3.2 互联 网 发 布 站 点 


下 面 可 以 将 个 人 站 点 发 布 到 Intemet 上 去 。 
(1) 首先 打开 google 网 站 ， 在 搜索 栏 输入 “免费 空间 ”字样 ， 如 图 17-14 所 示 。 
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pi- 去 人 9)- IE) - 合 - 男 刁 所 


Google | 


免费 交 间 


oom mt rf 


图 17-14 搜索 免费 空间 
(2) 利用 google 搜索 到 一 个 免费 空间 网 站 “http://www.5944.net”， 如 图 17-15 所 示 。 


Ee | 


5944.net 次 空 间 | 大助 中心 | 关 轩 忆 贷 生 间 | 多 代 空 间 坟 站 | Tbe Cor 
-hh 


天 就 试 这 


是 CEO 全 水 最 好 的 动态 免费 空间 光 左 


全 加 妆 科 ASP、 PHP、 ,NET, OO)、 SL 


(3) 单 击 左 上 角 的 “立刻 注册 ”， 打 开 用 户 注册 页 面 ， 图 17-16 所 示 。 
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图 17-16 注册 页 面 
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(4) 填写 完 每 一 项 后 单 击 “ 注 册 ” 按 钮 ， 跳 转 到 下 一 页 ， 给 出 账号 、 密 码 和 上 传 地 
址 等 信息 ， 如 图 17-17 所 示 。 


区 


图 17-17 注册 成 功 


(5) 单 击 “FTP 上 传 地 址 ” 行 的 “上 传 文件 ”按钮 ， 打 开 上 传 空间 ， 输 入 上 传 账号 
和 密码 后 单 击 “确定 ”按钮 ， 如 图 17-18 所 示 。 


I * 
9 [ES > ||| Peere. 户 
hd ed) 
nd E23 
和 ie En 
sr 
ME WD): 
EN): 


演 阁 ， 司 以 二 让 天下 六 光村 必 理 大， 以 作 押 过门、 
A 耻 到 区 TMEE 7 提要 PE 


本 门 健 于 区 的 


7-19 所 示 。 


17-19 上 传 网 站 
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(7) 此 时 就 可 以 用 系统 生成 的 二 级 域名 http://46485.t.qiegaowang.com 来 访问 自己 的 
网 站 了 。 如 果 觉 得 这 个 域名 不 好 ， 可 以 自己 定义 一 个 二 级 域名 ， 单 击 “ 您 自主 绑 定 的 域名 ” 


图 17-20 更 改 域名 


(8) 输入 新 的 域名 后 ， 单 击 “ 绑 定 ”按钮 ， 可 以 看 到 自己 定义 的 个 性 二 级 域名 ， 如 
图 17-21 所 示 ， 在 浏览 器 中 输入 新 的 域名 地 址 http://myhouse.t.qiegaowang.com 就 可 以 访问 
自己 的 网 站 了 。 


图 17-21 自 定义 二 级 域名 


17.4 难点 解析 


本 章 难 点 是 网 站 的 设计 和 分 析 发 布 。 在 设计 网 站 时 首先 要 明确 自己 将 要 设计 的 这 个 网 
站 的 定位 是 否 明确 ， 主 题 是 否 突出 ， 确 定 了 主题 后 就 可 以 设计 网 站 的 框架 结构 及 每 个 页 面 
的 结构 ， 这 些 做 好 以 后 就 可 以 着 手 准 备 材料 ， 包 括 文字 、 图 片 、 视 频 等 ， 并 且 存 放 的 文件 
夹 命名 要 简单 明了 ， 方 便 自己 调用 和 维护 。 

网 站 做 好 以 后 既 可 以 发 布 到 自己 架设 的 服务 器 上 去 ， 也 可 以 租赁 别人 的 空间 来 发 布 ， 
当然 一 般 免 费 的 空间 都 没有 一 级 域名 ， 要 一 级 域名 需要 自己 付费 申请 。 
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17.5 ”高 手 训练 营 


什么 是 域名 ? 

列举 几 个 常见 的 域名 ? 

网 站 设计 一 般 要 注意 哪些 东西 ? 

在 自己 的 机 器 上 搭建 一 个 IIS 服务 器 ， 并 发 布 一 个 网 站 。 
设计 一 个 个 人 网 站 ， 发 布 到 互联 网 去 。 
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一 、CSS 文字 属性 


color : #999999; 
font-family : 宋体 ,sans-serif: 
font-size : pt; 
font-style:itelic; 
font-variant:small-caps; 
letter-spacing : 1pt; 
line-height : 200%; 
font-weight:bold; 
vertical-align:sub; 
vertical-align:super; 
text-decoration:line-through; 
text-decoration: overline; 
text-decoration:underline; 
text-decoration:none; 
text-transform : capitalize; 
text-transform : uppercase; 
text-transform : lowercase; 
text-align:right; 
text-align:left: 
text-align:center; 
text-align:justify; 
vertical-align 属性 
vertical-align:top; 
vertical-align:bottom; 
vertical-align:middle; 
vertical-align:text-top; 
vertical-align:text-bottom:; 


二 、CSS 边框 空白 


padding-top:10px; 


CSS 样式 表 


padding-right: 10px:; 
padding-bottom: 10px; 
padding-left: 10px; 
list-style-type:decimal; 
list-style-type:lower-roman; 
list-style-type:upper-roman; 
list-style-type:lower-alpha; 
list-style-type:upper-alpha; 
list-style-type:disc; 
list-style-type:circle; 
list-style-type:square; 
list-style-image:url(/dot.gif); 
list-style-position: outside; 


list-style-position:inside; 
三 、CSS 背景 样式 


background-color:#F5E2EC:; 


background:transparent; 


background-image : url(/image/bg.gif); 


background-attachment : fixed; 


background-repeat : 
background-repeat : 
background-repeat : 
background-repeat : 


repeat; 
no-repeat; 
repeat-x; 


repeat-y; 


指定 背景 位 置 


background-position : 90% 90%; 
background-position : top; 
background-position : bottom:; 
eft: 


background-position : 
background-position : right; 
background-position : center; 
四 、CSS 连接 属性 

a 

a:link 

a:Visited 


a:activVe 


属性 大 全 
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a:hover 

鼠标 光标 样式 

链接 手指 CURSOR: hand 
十 字体 cursor:crosshair 


箭头 朝 下 cursor:s-resize 

十 字 箭头 cursormove 

箭头 朝 右 cursormove 

加 一 问号 cursorhelp 

箭头 朝 左 cursor:w-resize 
箭头 朝 上 cursor:n-resize 
箭头 朝 右 上 cursor:ne-resize 
箭头 朝 左上 cursor:nw-resize 
文字 I 型 cursor:text 

箭头 斜 右 下 cursor:se-resize 
箭头 斜 左 下 cursor:sw-resize 
漏斗 cursorwait 


光标 图 案 IE6) ” p {cursor:url(" 光 标 文件 名 .cur"),text:} 
五 、CSS 框 线 一 览 表 


border-top : 1px solid #6699cc; 
border-bottom : 1px solid #6699cc; 
border-left : 1px solid #6699cc; 
border-right : 1px solid #6699cc; 
以 上 是 建议 书写 方式 ， 但 也 可 以 使 用 常规 的 方式 如 下 。 
border-top-color : #369 
border-top-width :1px 
border-top-style : solid 

其 他 框 线 样式 

solid 

dotted 

double 

groove 

ridge 

inset 


‘outset 
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六 、CSS 表单 运用 

字 方 块 

钮 

选 框 

选择 钮 

多 行文 字 方块 

下 拉 式 菜单 选项 1 选项 2 
七 、CSS 边界 样式 


着 痊 半 


margin-top: 1 Opx; 
margin-right: 10px; 
margin-bottom: 1 0px; 


margin-left: ] Opx:; 
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HTML 颜 色 代 码 表 


#000000 #2F0000 #600030 #460046 #28004D 
#272727 #4D0000 #820041 #5E005E #3A006F 
#3C3C3C #600000 #9F0050 #750075 #4B0091 

#4F4F4F #750000 #BF0060 #930093 #5BOOAE 


#AE0000 
ES EN ES ER 
#8E8ES8E #EAO000 #EF359A #FFOOFF #9F35FF 
PE EE 
ES ESI 

ES 国 国 ,= 上 | msce| | rseee 国 国 | ceser| 

ou BB wns | as | | | paar | 
geo | | rom | | ereree | | wpcnsrr| 


#5B5B5B 
#6C6C6C 
#7B7B7B 


#EOE0 
帮 OFOEF0 帮 FB5B5 医 党 #EFD9EC | | #EFFDOFF | | #E6CAFF 
el #FFE6FF | | #F1ElFF 


| #FcFCEC | 三 FD2D2 | | #EEFECF5 
#EFFFFFF 下 帮 FECEC | | #EFF7FB 
一 #000079 #003E3E 


oo 国 国 #003D79 #005757 #01814A #007500 


#0000C6 #004B97 


#0000C6 #005AB5 


#007979 #019858 #009100 
#009393 #01B468 #00A600 


#0000E3 #0066CC #00AEAE #02C874 #00BB00 


#2828FF #0072E3 #00CACA #02DF82 #00DB00 


#4A4AFF #0080FF #00E3E3 #02F78E #00ECO00 


#6A6AFF #2894FF #00FFFF #1AFD9C #28FF28 


#7D7DFF #46A3FF #4DFFFF #4EFEB3 #53FF53 


#9393FF #66B3FF #80FFFF #7AFEC6 #79FF79 


#AAAAFF #84C1FF 


#A6FFFF #96FED1 #93FF93 


#B9B9FF #97CBFF #BBFFFF | #ADFEDC #A6FFA6 
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#CECEFF #ACDGFF #CAFFFF | |#CIFFE4 | |#BBFFBB 
#DDDDFF #C4E1FF #D9FFFF #D7FFEE #CEFFCE 
#ECECFF #D2E9FF #ECFFFF #E8FFFS #DFFFDF 
4FDFFFF | | 4FBFFFD | | tfOFFFO 
#467500 #424200 #5B4B00 #844200 #642100 


#548C00 #SB5B00 #796400 #9F5000 #842B00 


EE ES EZ ES EES 
pro BB :co Bero, B00 BR > 
po Po S00 Do RI 
ceo DD ow Doo Dn, PM 
Tooreo srro0 oeoco0 Dro Bo ro 
sce 由 | oo ED306 .sreh042 属国 oo 
EN EE 
voorres | | me | | yes | | ,ro hEFODGF | 
cr | | rero | | wrreso | | wrrcrse [| trrApso 
warres | | HEEFAA| | yepoy | | weeps | | terBpop 
werrac | | wrrroac| | werpces| | rcpp| 
HAFFFFCE | | APEPICL | | wreca| | wepacs 
| mmmpgr| | weresp7 | | wrreepp| | reeps| 

FFFFP | | ArcEC| | APFPAF | | APEPEE | 

国 Cl pe Ey 
pasa 00 I 077 1 0 


#B9B973 #81COCO #A6A6D2 #C07AB8 


#CF9E9E #C2C287 #95CACA 号 #B8B8DC #CA8EC2 


#CDCD9A #A3D1D1 #C7C7E2 #D2A2CC 
#EIC4C4 #D6D6AD #B3D9D9 #D8D8EB | #DAB1D5 
#EBD6D6 #DEDEBE #C4E1E1 #E6E6F2 #E2C2DE 
#FE2E6E6 


#E8E8DO #D1E9E9 #F3F3FA #EBD3E8 
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